我有一個菜單:爲什麼這個菜單包裝?
http://www.spotlesswebdesign.com/dqhendricks/index.html
的問題是,當你調整窗口的大小足夠小,菜單將着手結束到第二行。我想阻止這種情況的發生,並且在過去我使用非常類似的CSS而不會出現這個問題。我怎樣才能阻止它包裝?
下面是一些代碼:
HTML
<div id="nav">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Experiments</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
CSS
#nav {
margin: 0 25px;
}
#nav .left {
float: left;
width: 9px;
height: 38px;
background-image: url('../images/nav/left.png');
}
#nav .right {
float: right;
width: 9px;
height: 38px;
background-image: url('../images/nav/right.png');
}
#nav .center {
height: 38px;
margin: 0 9px;
background: url('../images/nav/center.png') repeat-x;
}
#nav ul {
width: 1000px;
height: 38px;
margin: auto;
padding-left: 2px;
list-style-type: none;
background: url('../images/nav/divider.png') top left no-repeat;
}
#nav li {
display: inline;
}
#nav a {
display: block;
float: left;
padding: 0 30px 0 28px;
height: 38px;
line-height: 36px;
text-decoration: none;
color: #777777;
background: url('../images/nav/divider.png') top right no-repeat;
}
針對IE6評論+1。 – Martin