对齐段落的浮动右侧部分左侧的文本

编程问答 2022-04-24

问题描述

我需要给一些浮动的右侧文本相同的开始位置。我有多个 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/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>

我有什么：

Bad Align

我需要什么：

Right align

感谢谁来回答！

解决方法

实际上，这种类型的内容是您可以使用表格的典型示例，其默认设置将完全符合您的要求。所以我相应地修改了你的代码，使用 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>

,

您可以使用 flexbox 完成此操作，并在此过程中简化 HTML。

从 span 元素中移除内联样式并设置 CSS 以让 flex 子元素正好占据一半的空间。这将为您提供所需的布局。

.card-body>p {
  display: flex;
  flex-flow: row nowrap;
}

.card-body>p>* {
  flex: 1;
}
<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" style="max-width: 20rem; border: 1px solid #004d99; border-radius: 20px;">
  <div class="card-header" style="background-color: #fff; border-bottom: 1px solid #004d99; border-top-left-radius: 20px; border-top-right-radius: 20px;">
    <input style="border: 2px #004d99 solid;" class="form-check-input chk" type="checkbox" value="" id="flexCheckDefault"> Stato: Pubblicato <span style="color: #90ee90;"> &#11044 </span><i class="far fa-file-alt" style="margin-left: 3%;"></i>11 <i class="fas fa-eye"
      style="margin-left: 3%;"></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>

bootstrap-4htmltext-align