3

我有一个问题是如何调整 html 中文本或单词之间的空格。我希望我的结果 2“冒号”对齐可以调整同一行。

下面是我的示例代码：

<tr><td style="font-size:11px;">Name :</td></tr><br>
<tr><td style="font-size:11px;">Date &nbsp;<span style="word-spacing:80px;">:</span></td></tr>

现在我的结果对齐方式不能像：

结果

我希望预期的结果如下所示：

结果_2

我曾尝试使用<p>替换<span>调整对齐方式，但“冒号”会分解。希望有人能指导我如何解决这个问题。谢谢。

4

5 回答 5

2

由于冒号是用于视觉分离而不是具有任何意义，我会考虑将其插入伪元素中，而不是实际插入 HTML 中。

此代码段将冒号放在以下 td 之前，以确保冒号对齐。

td:nth-child(2)::before {
  content: ':';
}
<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

于 2021-11-24T06:22:45.133 回答
1

如果它是关于一个单词后跟一个:，text-align-last:justify;可以完成这项工作

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}
<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>

于 2021-11-24T12:16:07.073 回答
1

最简单的方法是将冒号放在“文本”的开头，而不是“标题”的结尾。

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}
<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

如果需要在“文本”为空时省略它，可以将冒号输出为td::beforeusing CSS。

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}
<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

于 2021-11-24T04:57:33.783 回答
1

在这里，我更新了您的示例代码，将:第二个 td

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

于 2021-11-24T04:57:36.143 回答
1

我遇到了类似的问题，我发现的唯一“hacky”方式是：
“将文本和分隔符（:在本例中）放入包装器（如<div>）并对齐它们。

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}
<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

此外，您不需要<br>在表格行（<tr>s）之间。

于 2021-11-24T08:05:14.140 回答