html - 纯粹使用 CSS 间隔动态导航元素

Question

我知道我可以使用 javascript 实现这一点，但是我想知道是否有人有任何好主意如何使用纯 CSS 来完成，这样我就可以避免在 DOM 之后执行各种计算所导致的“跳跃”效果加载并应用样式，或者必须在每次页面更改时使用加载 gif 来隐藏它。

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

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

Answer 1

你需要的是所谓的Flex-Box( flex 盒子)模型。它并未在所有浏览器中实现。是的，出于测试目的，您可以继续使用以下 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