水平菜单，可以很好地调整 [英] Horizontal menu that resizes nicely

问题描述

我正在使用以下横向菜单进行操作：

http://jsfiddle.net/UeFeb/

我想要每个< li> 项目在菜单中以反斜杠分隔。我已根据此方法制作了菜单： http://stackoverflow.com/a/6880421/556006

如何获取菜单：

• 每个< li> 元素之间，以便它们始终位于每个后续< li>


• 当浏览器宽度降至730px以下时，自动调整为2行3 < li> $ c>< li> ，因为浏览器宽度会减小）

解决方案

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

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

至于调整大小，你可以使用 @media 查询。看看这个演示（根据需要重新调整）：

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

---

重做我的答案

pre> < ul id =menustyle =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>起亚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; 
 
 / *仅用于演示* / 
 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屏幕和（max-width：730px）{
 #menu {
 min-width：1px ; 
 width：35％; 
} 
} 
  

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

I'm struggling with the following horizontal menu:

http://jsfiddle.net/UeFeb/

I'd like each <li> item in the menu to be separated by a backslash. I've based my menu on this method: http://stackoverflow.com/a/6880421/556006

How can I get the menu to:

• Have the slashes sit in the negative space between each <li> element so that they always sit in between each subsequent <li>
• When the browser width drops below 730px, automatically resize to 2 rows of 3 <li> items (at the moment it drops one <li> down at a time as the browser width is reduced)

Thoughts?

解决方案

You can add the slashes automatically with CSS like so:

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

And as for the resizing you can sorta fake it using @media queries for that. Take a look at this demo (readjust as necessary):

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

---

Reworked my answer into a more satisfactory one, here is the breakdown for future users:

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/

这篇关于水平菜单，可以很好地调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！