导航栏不是内嵌在更高的缩放

我已经做了一个简单的导航栏，但列表项不内联在一个更高的缩放。导航栏不是内嵌在更高的缩放

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; 
}

下面是该代码的小提琴！

http://jsfiddle.net/CCCMC/3/

来源

2013-01-03 Sumit Gera

改变宽度，使之适合一定会努力，或者你可以试试这个（改：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/

这允许不同尺寸/不同数量的菜单项。

（记得加*变焦：1; *显示：内联;修复了IE6/7，如果你需要它）

来源

2013-01-03 11:42:42 ShaunYearStrong

小提琴类似于我的！ –

完全正确，我忘了更新它的变化，我现在做了，链接已经改变。好斑点！ – ShaunYearStrong

其实我已经去了一个固定宽度的导航栏！顺便说一句，你为什么使用类拉伸？ –

只是调整的 'width：155px;' 'li a'选择器的属性。我检查了125px的值看起来不错。

来源

2013-01-03 11:42:17

这个工程：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; 
}

来源

2013-01-03 11:46:30 P1nGu1n

导航栏不是内嵌在更高的缩放

回答

相关问题