CSS佈局問題

我需要顯示以下列表，每個標籤佔據ul的整個寬度。 ul的寬度是500px;CSS佈局問題

<ul> 
<li><a href="#">Home</a>a href="#">Home</a></li> 
<li><a href="#">About us</a><a href="#">About us</a><a href="#">About us</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">FAQs</a><a href="#">FAQs</a></li> 
<li><a href="#">Contact us</a></li> 
</ul>

即：如果裏只有1，則該標籤的寬度是100％，如果有3個則標籤的寬度爲33％。

我知道我可以做li class =「has3elements」等等，但是有沒有更乾淨的方法來做到這一點？

來源

2010-10-31 Jas

CSS：

a { display:table-cell; } 
li { display: table-row; } 
ul { display: table; }

我現在不能測試此權利（從我的手機提交），但它應該是很容易找到的。

來源

2010-10-31 05:11:07 pinkfloydx33

我懷疑他想用這種方式給所有他的A，LI和UL標籤 – 2010-10-31 08:18:41

我寧願給封閉ul元素的id='navbar'並以下列方式

#navbar {/*properties for ul*/} 
#navbar a {/*properties for a element*/} 
#navbar li (/*properties for li element*/}

這應該允許您控制多個無序列表元素，而不同類別搞亂你的CSS定義屬性。

來源

2010-10-31 06:17:44 Philar

這不會對IE有很大的幫助，但我認爲我現在可以在Gecko和WebKit瀏覽器中分享我們現在可以做的事情，並希望很快在其他瀏覽器中使用CSS3 Flexible Box Layout Module。它非常強大。你可以想象今天使用另一種你選擇的技術作爲其他瀏覽器的後備。

要看看它是如何工作的，粘貼到文本編輯器，將其保存，並在最近版本的Firefox，Chrome或Safari瀏覽器的運行：

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <style> 
     ul { 
     list-style: none; 
     padding: 0; 
     width: 500px; 
     background: gray; 
     } 
     li { 
     width: 500px; 
     display: -moz-box; 
     display: box; 
     -moz-box-orient: horizontal; 
     -webkit-box-orient: horizontal; 
     box-orient: horizontal; 
     } 
     li a { 
     display: block; 
     text-align: center; 
     -moz-box-flex: 1; 
     -webkit-box-flex: 1; 
     box-flex: 1; 
     margin: 2px; 
     background: silver; 
     } 
    </style> 
    </head> 
    <body> 
    <ul> 
     <li><a href="#">One</a></li> 
     <li><a href="#">Two.one</a><a href="#">Two.two</a><a href="#">Two.three</a></li> 
     <li><a href="#">Three.one</a><a href="#">Three.two</a></li> 
    </ul> 
    </body> 
</html>

最終的結果應該看起來像從這張截圖FF3.6：

A list of anchors display width Flexbox

我寫了一篇關於這個CSS3模塊，綽號「Flexbox的」，在http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/。另見http://www.html5rocks.com/tutorials/flexbox/quick/。

來源

2010-10-31 08:11:57 stephenhay

回答

相關問題