Question

我在整理一些文字时遇到了一些麻烦。我需要两列，一列有数字，另一列有文字，如下：

1入门一 2入口2 3入门三 4入门五 5入门6

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

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

Answer 1

您应该使用适当样式的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>

Answer 2

根据我的评论，我认为这项工作的最佳元素是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。

如何在CSS中对齐两列文本

2 个答案: