html - 纯粹使用 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