使用CSS纯粹动态导航项

Question

我知道我可以使用javascript实现这一点，但是我想知道是否有人有任何明智的想法如何用纯CSS完成这样我可以避免在DOM之后执行各种计算会导致的“跳跃”效果加载和样式应用或必须在每个页面上使用加载gif更改以隐藏它。

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

理想情况下，我想避免使用表格。我很确定我想要达到的目标是不可能的

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;
}

您可以在Quick hits with the Flexible Box Model看到基本和高级示例。

---

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