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

CSS布局问题

回答

相关问题