如何使用css做到这一点

Question

我目前正在开发一个Web应用程序,我需要以表格方式显示一些字段.例如:

------------------------------------------------------
First Name: John   Last Name: Smith   Age: 26
------------------------------------------------------
Town: Madrid       Country: Canada   Colour: Blue 
------------------------------------------------- 
etc  
-------------------------------------------------

这些字段需要对齐(在上面的例子中,'Town'应该正好在'First Name'之下,'Country'应该在'LastName'之下等等).我正在考虑使用一个html表(并在每个单元格中放置一个fieldname/value),但在我在这个网站上阅读的所有内容之后,看起来我应该使用css,因为我想要显示的数据不是真正的表格.我只是希望它看起来像表格.我找不到用css做这个的简单方法.有任何想法吗？

Answer 1

我觉得你对何时使用CSS以及何时使用表格感到困惑.当你拥有那么多数据时,你可能应该使用表格.将实际的BOX定位在使用CSS中是很好的,但从我可以看到的框中的数据应该在一个表中.

Answer 2

在这些情况下,使用CSS摸索是一个PITA,我几乎总是建议一个表.正如斯科特已经说过的那样,在语义上定义列表将是一个不错的选择:

<dl>
  <dt>First Name</dt><dd>John</dd>
  <dt>Last Name</dt> <dd>Smith</dd>
  <dt>Age</dt>       <dd>26</dd>
  <dt>Town</dt>      <dd>Madrid</dd>
  <dt>Country</dt>   <dd>Canada</dd>
  <dt>Colour</dt>    <dd>Blue</dd>
</dl>

你可以这样设计:

dl {
    margin: 0;
}
dt {
    float: left;
    background: #eee;
    width: 10%;
    margin: 0;
    white-space: nowrap;
    padding: 0.25em;
}
dt:after {
    content: ':';
}
dd {
    float: left;
    width: 20%;
    margin: 0;
    padding: 0.25em;
}

要使每行的X值对齐,您必须明确指定每个元素的宽度,这可能并不总是那么实用.虽然要获得一个新行,您可以使用:nth-​​child选择器(或使用旧浏览器的属性)并clear: left;输入其定义.

Answer 3

这实际上是使用HTML表的绝佳机会.这正是HTML表的用途.这些数据对我来说非常明显.