是否可以像表格一樣對齊下列2行？第一行是h2，因爲它是標題，其餘是列表。第一列應該很寬，但其餘的可以和文本一樣寬。這些列必須填寫div的寬度。對齊像一個表，但與CSS？

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

實施例：

Example

來源

2011-09-08 Jane Watson

這可以用CSS2的'顯示器來完成：table'及相關規則，這是所有瀏覽器，除了IE，直至IE8的支持。但我對想要這樣做的實際原因感興趣。 – ThatMatthew

@ThatMatthew 1.）許多人（不幸的是）仍然使用IE7，並且不支持這些CSS2屬性。 [w3schools]（http://www3.w3schools.com/cssref/pr_class_display.asp）2.）W3C不推薦使用舊的表格方式，因爲它很難提取數據。 [W3C]（http://www.w3.org/TR/html5/tabular-data.html） –

我只是想確保你知道_layout_表是應該避免的。如果你有一張數據表，你應該使用'table'標籤。 – ThatMatthew

的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

來源

2011-09-08 14:46:18 Simone

好的，但要注意IE7不支持這種方法。 –

老實說，如果你想顯示的表格數據，使用一個表。只有當您使用它們來定位非表格內容時，表格沒有任何問題。如果您需要格式化表格的幫助，請編輯您的問題。

來源

2011-09-08 21:17:00 Wex

有時您需要表格式對齊，但由於語義標記而不使用表格。所以我會刪除這個答案。 – Marko

我不會那麼快地跳到這個結論。人們不遺餘力地避免使用無表格標記，除非擁有無表格的網站。 – Wex

@Marko這是正確的。它只是表格式格式的一小部分頁面，所以我想遠離使用表格。 –

嘗試使用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;}

來源

2013-01-16 11:28:48

對齊像一個表，但與CSS？

回答

的HTML

的CSS

相關問題