使用纯CSS调整动态导航项的间距

Question

我知道可以使用JavaScript实现这一点，但我想知道是否有任何明智的想法如何使用纯CSS来完成，以避免在DOM加载后执行各种计算并应用样式或在每个页面更改时使用加载gif隐藏它所带来的“跳跃”效果。

基本上，导航具有固定宽度，比如960。网站是CMS驱动的，因此客户端可能有2个菜单项或10个菜单项。菜单项应根据其中包含的文本长度调整大小，并且每个菜单项应具有统一的填充，如下所示：

理想情况下，我想避免使用表格。但我相当确定我想要实现的不可能。

- Fraser

---

移除固定宽度并添加padding:5px 10px; 顶部和底部各5px，左右间距为10px。 - Sudip Pal

Answer 1

你需要的是Flex-Box（弹性盒子）模型。它并未在所有浏览器中实现。为了测试目的，你可以使用以下CSS。 CSS

ul li {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: box;
    box-orient: horizontal;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

您可以在Flexbox快速指南中查看基本和高级示例。

---

Flexbox模型布局

普通盒子
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex01.gif.pagespeed.ic.I78_V3_QCI.webp
使用Flexbox的最后一个盒子
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex02.gif.pagespeed.ic.sSh_w3N6ER.webp
使用Flexbox的最后两个盒子
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex03.gif.pagespeed.ic.QuC9JhvmNd.webp

- Praveen Kumar Purushothaman

---

我以前从未听说过这个。我会调查一下。谢谢！ - Fraser

当然。但它现在才出现。 :) - Praveen Kumar Purushothaman

@Fraser 添加了屏幕截图。请查看。 :) - Praveen Kumar Purushothaman

谢谢。我已经让它像这样工作了：http://goo.gl/dE9hr，但是在各种浏览器中需要进行大量的调试。 - Fraser