我在整理一些文字时遇到了一些麻烦。我需要两列,一列有数字,另一列有文字,如下:
1入门一 2入口2 3入门三 4入门五 5入门6
左栏是格鲁吉亚,右栏是Arial(字体大小略有不同)。我可以为每一行设置一个容器div,绝对将数字和文本段落放在这些段的顶部或底部,这样可以正常工作。问题是这意味着我必须给每一行一个固定的高度,以便它正确显示,如果文本需要流到多行(这可能是因为文本条目是动态的),这会导致问题。 / p>
我想在不使用表格的情况下执行此操作,并且不使用绝对定位,以便单个文本条目可以跨越多行(并且是跨浏览器兼容的)。
答案 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。