如何在CSS中对齐两列文本 [英] How to align two columns of text in CSS

问题描述

我只是有些麻烦排队一些文字，想知道如果你能帮助！我需要两列，一列有数字，一列有文本，如下所示：

I'm just having some troubles lining up some text and wondered if you could help! I need two columns, one with numbers and one with text, like so:

1输入一个

2输入两个

3条目三

4条目五

5条目六

1 Entry one
2 Entry two
3 Entry three
4 Entry five
5 Entry six

左栏是格鲁吉亚，右栏列为Arial（略有不同的字体大小）。我显然可以有一个容器div的每一行，绝对定位数字和文本段落在这些的顶部或底部，这很好。问题是这意味着我必须给每一行一个固定的高度，所以它正确显示导致一个问题，如果文本需要流到多行（这可能会做，因为文本项是动态的）。

The left column is Georgia and the right column is Arial (slightly different font sizes). I can obviously 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 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).

显然，我可以使用一个表，但我显然希望避免:)。我将非常感谢，如果任何人可以指向我正确的方向，如何通常做，而不使用绝对定位，以便单个文本条目可以跨越多行（并且是跨浏览器兼容，因此不使用CSS3

Obviously i could use a table but I clearly want to avoid that :). I would be most grateful if anyone could point me in the right direction as to how this is usually done without using absolute positioning so that the individual text entries can span over more than one line (and is cross browser compatible so doesn't use CSS3 etc).

非常感谢，如果您需要任何其他信息，请告诉我们。

Thanks so much as ever and please do let me know if you need any other information.

Dave

推荐答案

根据我的意见，我认为这个工作最好的元素是有序列表 ..

As per my comment, I think the best element for the job is an ordered list..

<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>

CSS，允许在列表项目符号和内容之间更改font-family

CSS, with the span to allow change of font-family between the list "bullets" and the content within, these could be divs if you have block content

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;
}

这篇关于如何在CSS中对齐两列文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！