CSS中如何对齐两列文本
我在排列一些文本时遇到一些问题。我需要两列，一列包含数字，一列包含文本，如下所示：
1 个条目
2 条目二
3 条目三
4 条目五
5 条目六
左栏是Georgia，右栏是Arial（字体大小略有不同）。我可以为每一行设置一个容器 div，并将数字和文本段落绝对定位在这些段落的顶部或底部，这样效果很好。问题是，这意味着我必须给每一行一个固定的高度，以便它正确显示，如果文本需要流到不止一行，这会导致问题（由于文本条目是动态的，因此很可能会这样做）。
我想在不使用表格的情况下执行此操作，并且不使用绝对定位，以便各个文本条目可以跨越多行（并且跨浏览器兼容）。
I'm having some trouble lining up some text. I need two columns, one with numbers and one with text, like so:
1 Entry one
2 Entry two
3 Entry three
4 Entry five
5 Entry six
The left column is Georgia and the right column is Arial (slightly different font sizes). I could have a container div for each row and absolutely position the number and text paragraphs to be at the top or bottom of these, which works fine. The problem is this means I have to give each row a fixed height so that it displays properly, which causes a problem if the text needs to flow onto more than one line (which it may well do as the text entries are dynamic).
I want to do this without using a table, and without using absolute positioning so that the individual text entries can span over more than one line (and is cross-browser compatible).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
根据我的评论，我认为这项工作的最佳元素是 有序列表。
通过允许在列表“项目符号”和其中的内容之间更改
font-family的跨度，如果您有块内容，这些可能是 div。As per my comment, I think the best element for the job is an ordered list.
With the span to allow changing of
font-familybetween the list "bullets" and the content within, these could be divs if you have block content.您应该只使用适当样式的
ol元素，如下所示：See: http://jsfiddle.net/tPjQR/
如果您希望数字与列表内容具有不同的样式，则需要将每个
li的内容包装在类似span的东西。只是没有更好的办法了。You should just use an appropriately styled
olelement, something like this:See: http://jsfiddle.net/tPjQR/
If you want to have different styles on the number versus the list content, you'll need to wrap the content of each
liin something like aspan. There just isn't a better way.