html - 在段落的 float 右侧部分左侧对齐文本

Question

我需要给一些 float 的右侧文本相同的开始位置。我有多个 p 并且每个 p 分为两个跨度。初始跨度向左 float ，秒向右 float 。
一些 HTML 和 Image 更清楚。

.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;
}
.card-body p span:first-child {
   float: left;
 }

.card-body p span:last-child {
    float: right; text-align: left;
 }

<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>
            <span >Nome:</span>
            <span >Lotto Prova</span>
        </p>
        <p>
            <span>Data Pubblicazione:</span>
            <span>10/12/2021</span>
        </p>
        <p>
            <span>Data di Scadenza:</span>
            <span>25/12/2021</span>
        </p>
        <p>
            <span>Accesso:</span>
            <span>Link</span>
        </p>
    </div>
</div>

我拥有的:

我需要的:

谢谢谁来解答!

Answer 1

实际上，这种类型的内容是您可以使用表格的典型示例，其默认设置将完全满足您的要求。所以我相应地修改了你的代码，使用 CSS-table display参数(但你也可以使用实际的 HTML table/tr/td/th 标签，然后你就不需要那个 CSS 并且它在语义上会更好)。
注意:我删除了跨度的内联样式，还删除了 md-3卡片中的类，否则内容根本不适合每行卡片，但由于宽度有限而导致中断，至少在代码片段中(在宽屏幕上不同)。

.card {
  border: 1px solid #004d99;
  border-radius: 20px;
  width: 300px;
}

.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;
  display: table;
}
.card-body > p {
  display: table-row;
}
.card-body > p > span {
  display: table-cell;
}

<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 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>
      <span>Nome:</span>
      <span>Lotto Prova</span>
    </p>
    <p>
      <span>Data Pubblicazione:</span>
      <span>10/12/2021</span>
    </p>
    <p>
      <span>Data di Scadenza:</span>
      <span>25/12/2021</span>
    </p>
    <p>
      <span>Accesso:</span>
      <span>Link</span>
    </p>
  </div>
</div>