如何制作 100% 水平跨浏览器 HTML/CSS 菜单?
1.保持干净的 HTML,li
list
2。无图像/javascript,无表格,符合 W3C 标准
无效示例:
/*CSS doesn't make `block` right/left space between `li` items (see attached image)*/
#nav{
text-align:justify;
}
#nav li{ /*border:1px solid #000; margin-right:1px; margin-left:1px;*/
display:inline-block; white-space:nowrap;
}
#nav li#span{ /*hack to make 100% horizontal*/
display:inline-block; width:100%; height:1px;
}
*html #nav li,*html #nav li#span,*+html #nav li,*+html #nav li#span{ /*IE6/7 hacks tah are not working*/
display:inline;
}
和:
<div id="nav">
<ul>
<li>Home <!--unfortunately it doesn't work without space after each list,
need for some solution--></li>
<li>Services </li><!--don't want to add style for each list separated-->
<li>Portfolio </li>
<li>Clients </li>
<li>Articles </li>
<li>Contact Us </li>
<li id="span"></li><!--don't like to add any extra tag (like this),
but other way it doesn't work,
need for some solution-->
</ul>
</div>
最佳答案
试试这个稍微不那么骇人听闻的版本:
<style type="text/css">
#nav ul {
list-style: none;
display: table;
*display: block;
width: 100%;
margin: 0;
padding: 0;
}
#nav ul li {
display: table-cell;
*display: inline;
width: auto;
min-width: 100px;
margin: 1px 0;
padding: 2px auto;
*padding: 2px 40px;
border: 1px solid #999;
text-align: center;
white-space: nowrap;
}
</style>
<div id="nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Clients</li>
<li>Articles</li>
<li>Contact Us</li>
</ul>
</div>
导致问题的是 IE7。
关于html - 100% 水平跨浏览器菜单 HTML/CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3232430/