html - CSS样式导航按钮

Question

您可以在此处看到我尝试做的尝试:http://rjlacount.com/clients/GreenTree/

我希望导航 li 自动确定填充，以便它们可以延伸到内部包装的整个宽度。因此，如果我添加另一个 li 或去掉一个 li，它们仍将居中，并且每个 li 的 padding 只会增加/减少以弥补它。

现在，我将最后一个导航 li float 到右侧，并为每个导航 li 添加填充，以使其尽可能接近全长。这几乎就是我想要的样子，但我想去掉最后两项之间的空格。

这可能吗？感谢您的帮助。

Answer 1

我不相信这会在 IE8 中起作用，但您始终可以使用条件样式表为那些浏览器提供 float 或 display: inline-block 后备.

例子

CSS

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

ul li {
    display: table-cell;
}

ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; 
}

jsFiddle .

jsFiddle再添加一个 li，您会发现 CSS 是不变的 :P