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

Question

我需要给一些 float 的右侧文本相同的起始位置。我有多个 p，每个 p 都分为两个跨度。初始跨度向左浮动，秒数向右浮动。

一些需要更清楚的 HTML 和图像。

.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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077369726974" rel="noreferrer noopener nofollow">[email protected]</a>/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 类，否则内容根本无法适应卡的行。 -line，但由于宽度有限而导致中断，至少在代码片段中如此(在宽屏幕上不同)。

.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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1815150e090e081b0a3a4e544f5449" rel="noreferrer noopener nofollow">[email protected]</a>/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>