Question

我正在努力使用以下水平菜单：

我希望菜单中的每个<li>项用反斜杠分隔。我的菜单基于这种方法：https://stackoverflow.com/a/6880421/556006

如何获取菜单：

让斜杠位于每个<li>元素之间的负空格中，以便它们始终位于每个后续<li>
当浏览器宽度降至730px以下时，会自动调整为2行3 <li>个项目（当浏览器宽度减少时，它会一次降低一个<li>）

思想？

Answer 1

您可以使用CSS自动添加斜杠：

#menu li:after {
    content: "\0020 \002F";
}

至于调整大小，您可以使用@media查询对其进行排序。看看这个演示（必要时重新调整）：

http://jsfiddle.net/andresilich/UeFeb/1/

将我的答案重写为更令人满意的答案，以下是未来用户的细分：

<强> HTML

<ul id="menu" style="list-style:none">
     <li><a href="#asics">ASICS</a></li>
     <li>/</li>
     <li><a href="#plants">PLANTS PLUS</a></li>
     <li>/</li>
     <li><a href="#tooheys">TOOHEYS</a></li>
     <li>/</li>
     <li><a href="#olympics">OLYMPICS</a></li>
     <li>/</li>
     <li><a href="#panadol">PANADOL</a></li>
     <li>/</li>
     <li><a href="#kia">KIA CADENZA</a></li>
</ul>

<强> CSS

#menu {
    height: 125px;
    margin: 0 auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 90%;
}

#menu li {
    max-width: 150px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}

#menu:after {
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

@media screen and (max-width:730px) {
    #menu {
        min-width: 1px;
        width: 35%;
    }
}

http://jsfiddle.net/andresilich/UeFeb/3/

水平菜单很好地调整大小

1 个答案: