2012-02-20 73 views
0

我正在嘗試使用塊元素(在本例中是無序列表)重新創建表格。我想要其中的一個項目來填充父元素。這在表格中非常容易。我只是將表格設置爲100%,而不是指定要填充父級的任何單元格的寬度。我如何使用塊元素做到這一點?使用塊元素重新創建表格時設置寬度

隨着表很容易:

<table width="100%" border="1"> 
    <tr> 
     <td width="200">200px</td> 
     <td>nice wide column which fills the page</td> 
     <td width="100">100px</td> 
    </tr> 
</table> 

但使用列表項

<style> 
    ul { 
     list-style-type: none; 
     padding-left: 0px; 
    } 
    li { 
     float: left; 
    } 
    .col1 { width: 200px; } 
    .col2 { } /* width: 100% doesn't work */ 
    .col3 { width: 100px; } 
</style> 

<ul> 
    <li class="col1">200px</li> 
    <li class="col2">tight column wrapping around this text</li> 
    <li class="col3">100px</li> 
</ul> 

我怎樣才能使該中心 「列」 填充頁面?

+0

你可以把一個例子,在[的jsfiddle(http://jsfiddle.net)什麼樣的表看起來像?我無法想象你的問題... – elclanrs 2012-02-20 05:46:54

回答

0

這個怎麼樣?

ul { 
    display: inline-table; 
} 
li { 
    display: table-cell; 
} 
.col1 { 
    width: 200px; 
} 
.col2 { 
} 
.col3 { 
    width: 100px; 
}​ 

證明它的工作原理:http://jsfiddle.net/zLvz5/

+0

這個工程!謝謝!!今天學到了新東西。 – Ben174 2012-02-20 06:16:26

0

通常我會使用JavaScript或計算寬度。但是,與CSS,這裏是一個不錯的解決方案: 使用樣式COL2(中心柱):

.col2 
{ 
    margin:0 100px 0 200px; 
    float:none; 
} 
also, use add this style to col3: 
.col3 
{ 
    float:right; 
} 

最後一個修改: 更改李訂單,使中心柱,最後加入這樣的:

<li class="col1">200px</li> 
<li class="col3">100px</li> 
<li class="col2">tight column wrapping around this text</li> 

同樣,這是一個不好的解決方案(imo)。

+0

聰明的解決方案,但其他人發佈解決方案來使用display:inline-table;並顯示:table-cell;這是訣竅。謝謝! – Ben174 2012-02-20 06:17:33