时间戳

首页 > 解决方案 > 将列表中的文本与其旁边的 span 对齐

html - 将列表中的文本与其旁边的 span 对齐

问题描述

美好的一天，这里的初学者只想问我正在尝试创建一个列表，就像所附图像中的列表一样，应该使用li标签并在其旁边添加一个跨度吗？

<li>
    <a href="#">Accessories</a>
    <span>6%</span>
</li>

但是当li标签有更长的文本时会发生什么，当我向跨度添加边距以分隔它们时，它旁边的数字不会垂直对齐。

样本：

示例图像

结果：

结果图像

标签： htmlcssweb

解决方案

您可以让您li灵活使用以下内容之间的对齐内容空间：

.flex {
  list-style: none;
  width: 50%;
  margin: 0;
  padding: 0;
}

.flex>li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.flex span {
  margin-left: 1em;
  /*bit of spacing between link and span in case text is very long */
}
<ul class="flex">
  <li>
    <a href="#">Accessories</a>
    <span>6%</span>
  </li>
  <li>
    <a href="#">Another</a>
    <span>16%</span>
  </li>
  <li>
    <a href="#">And Another that might have long text that could spill over 2 lines</a>
    <span>12%</span>
  </li>
</ul>

使用 flex 优于 float 的优点：

  • 你不需要明确的修复
  • 如果您的锚点位于多条线上，您的跨度将保持在同一条线上，而不是被推到下方
  • 浮动从未打算用于这样布局文档，所以不要滥用它们，现在 css 已经取得了进步，请改用适当的技术

推荐阅读