【问题标题】：Align like a table but with CSS?像表格一样对齐但使用 CSS？
【发布时间】：2014-04-21 03:23:14
【问题描述】：

是否可以像表格一样对齐以下 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;}

例子：

【问题讨论】：

这可以通过CSS2的display: table和相关规则来完成，除了IE直到IE8，所有浏览器都支持。但我对想要这样做的真正原因很感兴趣。
@ThatMatthew 1.) 许多人（不幸的是）仍然使用 IE7 并且不支持这些 CSS2 属性。 w3schools 2.) W3C 不推荐使用旧的表格方式，因为它很难提取数据。 W3C
我只是想确保您知道应该避免使用 layout 表。如果您有数据表，则应使用table 标记。

标签： html css layout

【解决方案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 Demo

【讨论】：

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

【解决方案2】：

老实说，如果您要显示表格数据，请使用表格。表格没有任何问题，只有当您使用它们来定位非表格内容时。如果您在格式化表格时需要帮助，请编辑您的问题。

【讨论】：

有时您需要类似表格的对齐方式，但由于语义标记而不使用表格。所以我会删除这个答案。
我不会这么快就得出这个结论。人们不遗余力地避免使用无表格标记，只是为了吹嘘一个无表格网站，这种情况并不少见。
@Marko 没错。它只是表格格式的页面的一小部分，所以我想远离使用表格。

【解决方案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;}

【讨论】：