如何使段落中右侧浮动文本左对齐且保持统一起始位置

这个问题其实是浮动布局的常见痛点——左侧标签文本长度不一致，导致右侧浮动元素的起始位置没办法对齐。我推荐用Flexbox布局来解决，既符合你已经在用的Bootstrap的设计思路，又能轻松实现预期效果：

方法一：利用Bootstrap内置的Flex类（最简单） #

Bootstrap 4本身就提供了Flex布局的工具类，不需要额外写自定义CSS，直接给每个<p>标签添加d-flex justify-content-between align-items-center类即可：

修改后的HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="card col-md-3 text-dark bg-light m-3">
 <div class="card-header">
 <input class="form-check-input chk" type="checkbox" value="" id="flexCheckDefault"> Stato: Pubblicato
 <span> &#11044 </span><i class="far fa-file-alt"></i>11
 <i class="fas fa-eye"></i>&nbsp;112
 </div>
 <div class="card-body">
 <p class="d-flex justify-content-between align-items-center">
 <span>Nome:</span>
 <span>Lotto Prova</span>
 </p>
 <p class="d-flex justify-content-between align-items-center">
 <span>Data Pubblicazione:</span>
 <span>10/12/2021</span>
 </p>
 <p class="d-flex justify-content-between align-items-center">
 <span>Data di Scadenza:</span>
 <span>25/12/2021</span>
 </p>
 <p class="d-flex justify-content-between align-items-center">
 <span>Accesso:</span>
 <span>Link</span>
 </p>
 </div>
</div>

同时记得移除原来CSS中针对span的浮动样式：

/* 删除以下两行 */
.card-body p span:first-child { float: left; }
.card-body p span:last-child { float: right; text-align: left; }

方法二：自定义Flex样式（如果需要更多控制） #

如果你不想依赖Bootstrap的工具类，也可以自己写Flex布局的CSS：

修改后的CSS #

.card { max-width: 20rem; border: 1px solid #004d99; border-radius: 20px; }
.card-header { background-color: #fff; border-bottom: 1px solid #004d99; border-top-left-radius: 20px; border-top-right-radius: 20px; }
.card-header input { border: 2px #004d99 solid; }
.card-header span { color: #90ee90; }
.card-header span i { margin-left: 3%; }
.card-body { margin-bottom: 0px; margin-top: 0px; }
/* 添加Flex布局样式 */
.card-body p {
  display: flex;
  justify-content: space-between; /* 让两个span分别靠左右两端 */
  align-items: center; /* 垂直居中对齐，让排版更美观 */
  margin-bottom: 0.5rem; /* 保持段落间的间距 */
}
/* 移除原来的浮动样式 */
.card-body p span:first-child {
  /* float: left; */
}
.card-body p span:last-child {
  /* float: right; text-align: left; */
  /* 可选：如果希望右侧文本右对齐，加上这行 */
  /* text-align: right; */
}

为什么这个方法有效？ #

浮动布局是基于元素自身宽度来排列的，左侧标签文本长度不同，span的宽度就不一样，导致右侧浮动元素的起始位置参差不齐。而Flexbox的justify-content: space-between会强制让容器内的两个子元素分别靠向左右两端，不管左侧内容长度如何，右侧元素都会对齐到同一位置，完美解决你的问题。

内容的提问来源于stack exchange，提问作者Davide Mercuri