如何在CSS中对齐两列文本

时间:2011-05-24 15:06:48

标签: css css-position vertical-alignment

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

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

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

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:3)

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