宽度为 100% 的 CSS 菜单

Question

我正在尝试使用 ul/li 制作一个导航栏，但我希望它采用所有可用宽度并在其中的 li 之间分配大小。

可能吗？

谢谢!

Answer 1

您可以使用表格样式。请注意，< IE8 不支持这些。

HTML

<ul>
    <li>home</li>
    <li>about</li>
    <li>contact</li>
</ul>

CSS

ul {
   display: table; 
   width: 100%;
}

ul li {
   display: table-cell; 
}

jsFiddle .

jsFiddle 中的边框仅用于视觉辅助。它们不是必需的。