導航欄不是內嵌在更高的縮放

我已經做了一個簡單的導航欄，但列表項不內聯在一個更高的縮放。導航欄不是內嵌在更高的縮放

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

導航欄不是內嵌在更高的縮放

回答

相關問題