如何在CSS中对齐两列文字

问题描述

| 我在整理一些文字时遇到了一些麻烦。我需要两列，一列带有数字，一列带有文本，如下所示： 1项一 2入门二 3入门三 4入门五 5项六 左列是格鲁吉亚，右列是Arial（字体大小略有不同）。我可以为每行设置一个容器div，并将数字和文本段落绝对定位在其顶部或底部，这很好用。问题是这意味着我必须给每一行固定的高度，以便其正确显示，如果文本需要流到多行上（这可能是文本输入是动态的，那么这很可能会造成问题），这会引起问题。 我想做到这一点而无需使用表，也无需使用绝对定位，这样单个文本条目可以跨越多行（并且与跨浏览器兼容）。     

解决方法

根据我的评论，我认为工作的最佳要素是有序列表。

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>

,您应该只使用适当样式的

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>