我有一个列表显示为使用CSS的单行菜单。菜单浮动到右侧,以输入框结尾。问题是输入框显示在比菜单更低的行上。我怎么能避免这个?
我的CSS如下:
<style type="text/css">
#nav {
margin:0;
padding:0;
list-style:none;
}
#nav li {
float:left;
display:block;
background-color: #6F7D94;
position:relative;
z-index:500;
margin:0 1px;
}
#nav li a {
display:block;
padding:5px 10px 5px 10px;
font-weight:200;
text-decoration:none;
text-align:center;
color:#fff;
}
.menu-container {
float:right;
}
</style>
我的菜单如下:
<div class="menu-container">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Browse</a></li>
<li><a href="#">Tags</a></li>
</ul>
<input name="q" id="id_q" />
<input type="submit" value="Search">
</div>
答案 0 :(得分:1)
这是小提琴。
答案 1 :(得分:0)
将列表的输入部分添加到另一对LI
。
答案 2 :(得分:0)
只需将white-space: nowrap;
添加到.menu-container
即可。
http://jsfiddle.net/vvR7B/
答案 3 :(得分:0)
添加宽度 menu-container { 浮动:权利; 宽度:700px; }