如何在 CSS 中对齐两列文本

Posted 2023-03-05

【中文标题】如何在 CSS 中对齐两列文本

【英文标题】：How to align two columns of text in CSS

【发布时间】：2011-09-01 00:58:34

【问题描述】：

我在排列一些文字时遇到了一些问题。我需要两列，一列带有数字，一列带有文本，如下所示：

1 个条目 2 参赛作品二 3 条目三 4 条目五 5 条目六

左栏是Georgia，右栏是Arial（字体大小略有不同）。我可以为每一行设置一个容器 div，并将数字和文本段落绝对定位在它们的顶部或底部，这样可以正常工作。问题是这意味着我必须给每一行一个固定的高度，以便它正确显示，如果文本需要流到多行上，这会导致问题（由于文本条目是动态的，它可能会这样做）。

我想在不使用表格和不使用绝对定位的情况下执行此操作，以便单个文本条目可以跨越多行（并且跨浏览器兼容）。

【问题讨论】：

你为什么不想为此使用一张桌子？

任何你不使用<ol>的原因，数字需要自己的元素吗？

@AllisonC 因为这是一个有序列表，而不是表格。

【参考方案1】：

根据我的评论，我认为最适合这份工作的元素是ordered list。

ol 
   font-family: georgia, serif;
   font-size: 16px;
   font-weight: bold;

ol li span 
   font-family: arial, sans-serif;
   font-weight: normal;
   font-size: 12px;

<ol>
  <li><span>Entry one<br>text on another line</span></li>
  <li><span>Entry two</span></li>
  <li><span>Entry three</span></li>
  <li><span>Entry five</span></li>
  <li><span>Entry six</span></li>
</ol>

通过允许在列表“项目符号”和其中的内容之间更改font-family 的跨度，如果您有块内容，这些可能是 div。

【讨论】：

噢！我不确定我是怎么错过的，当然它是一个有序列表，效果很好:)如果我想要内联的项目符号/数字但我不希望文本在它们下面流动是正确的方法使用 padding-left: 1.5em;列表样式位置：外部；还是有更清洁的方法？此外，是否有任何跨浏览器方法可以删除每个数字后的句号？非常感谢您的帮助，非常感谢:)

@deshg：关于"is there any cross browser way of removing the fullstop after each number" - 你需要支持哪些浏览器？

@thirtydot：尽可能多的浏览器，理想情况下是所有浏览器，但我很感激现在对大多数事情来说这是一个很大的要求！

@thirtydot 和@clairesuzy，我刚刚意识到使用上面的代码，如果一个项目符号的文本超过 2 行或更多行（我假设 17px 匹配奥尔？）。有没有办法减少文本的行距，因为当我将它设置在跨度上时它没有效果，如果我将它设置在 li 上，那么 firefox 中的间距比任何其他浏览器都多（这是不寻常的） .如果您知道为什么会这样，我将不胜感激？非常感谢

【参考方案2】：

您应该只使用适当样式的ol 元素，如下所示：

见：http://jsfiddle.net/tPjQR/

如果您想在数字和列表内容上使用不同的样式，您需要将每个 li 的内容包装在类似 span 的内容中。没有更好的方法。

ol 
    font-family: Georgia, serif;

ol span 
    font-family: Arial, sans-serif;
    font-size: 17px

<ol>
    <li><span>Entry one</span></li>
    <li><span>Entry two</span></li>
    <li><span>Entry three</span></li>
    <li><span>Entry five</span></li>
    <li><span>Entry six</span></li>
    <li><span>Entry Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</span></li>
</ol>