如何创建一个水平菜单,每个项目的宽度和间距相等? [英] How can I create a horizontal menu with each item being equal width and spacing inbetween?
问题描述
这里是我到目前为止:小提琴
2个问题:
- 我已经硬编码每个
li 到
33%
,我不想这样做,以便我可以轻松添加更多项目。 - 我想在每个项目之间(在背景颜色中的间隙)放置一些间距,但是一旦我添加一个边距,一个项目将被向下一行。如何解决这个问题?
#main-nav {list-style:none; margin:0; padding:0; width:100%; overflow:auto;}#main-nav li {float:left;宽度:33%; height:25px; text-align:center;}#main-nav li a {width:100%;显示:block;高度:100%; line-height:25px; text-decoration:none; background-color:#e0e0f0; font-weight:bold; color:#021020;}#main-nav li a:hover {background-color:#498cd5; color:#ddeeee;}
< ul id = main-nav> < li>< a href =#>一个< / a>< / li> < li>< a href =#>两个< / a>< / li> < li>< a href =#>三个< / a>< / li>< / ul>
>
请参阅: http://jsfiddle.net/f6qmm/
display:table
用于均匀分布 li
的动态数。很遗憾,IE7中的无法正常工作,因此 * float:left
(仅适用于IE7和较低版本),所以至少他们都在一行上 - 虽然它仍然看起来可怕。
padding-left:5px
应用于每个 li
,然后 li:first-child {padding-left :0} 仅删除第一个
li
#main-nav {list-style:none; margin:0; padding:0; width:100%; display:table; table-layout:fixed; overflow:hidden}#main-nav li {display:table-cell; * float:left; / *改善IE7 * / height:25px; text-align:center; padding-left:5px}#main-nav li:first-child {padding-left:0}#main-nav li a {width:100%;显示:block;高度:100%; line-height:25px; text-decoration:none; background-color:#e0e0f0; font-weight:bold; color:#021020;}#main-nav li a:hover {background-color:#498cd5; color:#ddeeee;}
< ul id = main-nav> < li>< a href =#>一个< / a>< / li> < li>< a href =#>两个< / a>< / li> < li>< a href =#>三< / a>< / li>< / ul>< hr />< ul id =main-nav> < li>< a href =#>一个< / a>< / li> < li>< a href =#>两个< / a>< / li> < li>< a href =#>三< / a>< / li> < li>< a href =#>四< / a>< / li> < li>< a href =#>五< / a>< / li>< / ul>
>Here's what I've got so far: fiddle
2 problems with it though:
- I've hard-coded the width of each
li
to33%
, which I'd prefer not to do so that I can easily add more items.- I want to put some spacing between each item (a gap in the background color), but as soon as I add a margin, one item will be bumped down a line. How do I get around that?
#main-nav { list-style: none; margin: 0; padding: 0; width: 100%; overflow: auto; } #main-nav li { float: left; width: 33%; height: 25px; text-align: center; } #main-nav li a { width: 100%; display: block; height: 100%; line-height: 25px; text-decoration: none; background-color: #e0e0f0; font-weight: bold; color: #021020; } #main-nav li a:hover { background-color: #498cd5; color: #ddeeee; }
<ul id="main-nav"> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul>
解决方案See: http://jsfiddle.net/f6qmm/
display: table
is being used to evenly space a dynamic number ofli
s. Unfortunately, that doesn't work in IE7, so*float: left
is used (for only IE7 and lower) so that at least they're all on one line - though it still looks horrendous.
padding-left: 5px
is applied to everyli
, thenli:first-child { padding-left: 0 }
removes it for only the firstli
.#main-nav { list-style: none; margin: 0; padding: 0; width: 100%; display: table; table-layout: fixed; overflow: hidden } #main-nav li { display: table-cell; *float: left; /* improve IE7 */ height: 25px; text-align: center; padding-left: 5px } #main-nav li:first-child { padding-left: 0 } #main-nav li a { width: 100%; display: block; height: 100%; line-height: 25px; text-decoration: none; background-color: #e0e0f0; font-weight: bold; color: #021020; } #main-nav li a:hover { background-color: #498cd5; color: #ddeeee; }
<ul id="main-nav"> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> <hr /> <ul id="main-nav"> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> <li><a href="#">four</a></li> <li><a href="#">five</a></li> </ul>
这篇关于如何创建一个水平菜单,每个项目的宽度和间距相等?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!