使用CSS实现类似表格对齐的效果？

Question

能否像表格一样对齐以下2行？第一行是h2，因为它是标题，其余是列表。第一列应该相当宽，但其余的可以与内部文本一样宽。列必须填充div的宽度。

<div>
<h2 class="header1">
<span class="span1">one</span>
<span class="span2">two</span>
<span class="span3">three</span>
<span class="span4">four</span>
</h2>
<ul><li>
<span class="span5">five</span>
<span class="span6">six</span>
<span class="span7">seven</span>
<span class="span8">eight</span>
</li></ul>
</div>

div {width: 500px;}
h2 span, li span {float: left; width: auto; white-space: nowrap;}

例子：

- Jane Watson

---

这可以通过CSS2的display: table和相关规则来实现，除了IE8之前的所有浏览器都支持。但我对想要这样做的实际原因很感兴趣。 - ThatMatthew

@ThatMatthew 1.) 很多人（不幸的是）仍在使用IE7，这些CSS2属性不受支持。[w3schools] 2.) W3C不推荐使用旧的表格方式，因为它很难提取数据。[W3C] - Jane Watson

我只是想确保您知道应该避免使用_layout_表格。如果您有数据表格，应该使用table标签。 - ThatMatthew

Answer 1

HTML

<div class="table-like">
  <div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>
  <div>
    <span>five</span>
    <span>six</span>
    <span>seven</span>
    <span>eight</span>
  </div>
</div>

CSS

.table-like {
  display: table;
  width: 500px;
}

.table-like div { 
  display: table-row;
}

.table-like div span { 
  display: table-cell;
}

/* add borders */
.table-like,
.table-like div span {
  border: 1px solid black;  
}

/* bold on 1st row */
.table-like div:nth-child(1) {
  font-weight: bold;
}

jsFiddle演示

- Simone

---

好的，但要注意IE7不支持这种方法。 - Jane Watson

Answer 2

老实说，如果您想展示表格数据，请使用表格。使用表格定位非表格内容没有错，但这样做就不太好。如果您需要格式化表格，请编辑您的问题，并寻求帮助。

- Wex

---

有时候你需要类似表格的对齐方式，但由于语义标记的原因不能使用表格。因此我会删除这个答案。 - Marko

我不会轻易得出那个结论。人们常常不惜代价回避使用无表格式标记，只是为了炫耀自己的网站是无表格式的。 - Wex

@Marko，你说得对。只有页面的一小部分是类似表格的格式，所以我想避免使用表格。 - Jane Watson

Answer 3

尝试使用 display: inline-block：

h2{display: inline-block; margin:0 padding:0; min-width: 300px}/*use min-width what you want*/
ul, ul li{display: inline-block; margin:0; padding: 0;}

- George Burton