我制作了一个简单的导航栏,但是列表项不是以更高的缩放比例内联。
HTML
<ul>
<li><a href="#">Type 1</a></li>
<li><a href="#">Type 2</a></li>
<li><a href="#">Type 3</a></li>
<li><a href="#">Type 4</a></li>
</ul>
的 CSS
li{
display:inline;
float:left;
}
li a {
display:block;
width:155px;
text-align:center;
}
ul {
background-color:#999999;
border:1px solid #006666;
height:25px;
list-style-type:none;
margin:0;
padding:0;
}
这是代码的小提琴!
答案 0 :(得分:1)
改变宽度以使其适合肯定会起作用, 或者您可以尝试这个(修改自:Fluid width with equally spaced DIVs)
<强> HTML:强>
<ul>
<li><a href="#">Type 1</a></li>
<li><a href="#">Type 2</a></li>
<li><a href="#">Type 3</a></li>
<li><a href="#">Type 4</a></li>
<li class="stretch"></li>
</ul>
<强> CSS:强>
li{
display:inline-block;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
li a {
text-align:center;
background-color:green;
}
ul {
background-color:#999999;
border:1px solid #006666;
height:25px;
list-style-type:none;
margin:0;
padding:0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
在JS小提琴上看到它: http://jsfiddle.net/CCCMC/45/
这允许不同尺寸/不同数量的菜单项。
(请记住添加* zoom:1; * display:inline;如果需要,可以修复IE6 / 7)
答案 1 :(得分:0)
只需调整'宽度:155px;' 'li a'选择器的属性。我检查了125px值看起来不错。
答案 2 :(得分:0)
这有效:http://jsfiddle.net/CCCMC/3/
您定义了ul的高度,当您缩放它时,它不再适合一行。所以我删除了高度,并使用display: inline-block
代替float: left
,因此您无需再定义高度。
只是研究代码,它几乎是不言自明的。
li{
display:inline-block;
width:155px;
text-align:center;
}
ul {
background-color:#999999;
border:1px solid #006666;
list-style-type:none;
margin:0;
padding:0;
}