我的菜单在:
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;
}