帮助定位搜索栏

Question

我有我的导航栏使用无序链接和使用jQuery的UI效果。这工作正常。现在我已经设计了一个与酒吧主题相匹配的搜索栏，并且希望将其定位到导航栏的右侧。有点像vimeo网站..

问题是，我不能包括它在同一个列表因为我不希望jquery效果应用到搜索栏。我如何将其定位到导航栏的右侧？

继承人的CSS我试过，但不起作用

.search{ 
background-image:url('search.jpg'); 
margin-top:inherit; 
margin-left:inherit; 

width:200px; 
height:40px; 

} 

这里去的HTML

<div class="search"> 
    <input type="text" id="searchField" /> 
    <img src="go.jpg" alt="Search" onclick="alert('You clicked on search button')"   /></div> 

Answer 1

有一对夫妇选择最好的选择取决于你的整个布局。以下是水平导航列表的两个基本CSS实现，以及彼此内联搜索。

HTML

<div id="Navigation"> 
    <ul> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
    </ul> 
    <div class="search"> 
     <input type="text" id="searchField" /> 
     <img src="go.jpg" alt="Search" onclick="alert('You clicked on search button')" /> 
    </div> 
    <br style="clear: both;" /> 
</div> 

CSS的float

#Navigation ul 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#Navigation ul li 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 
#Navigation ul li a 
{ 
    display: block; 
    height: 40px; 
    width: 50px; 
} 
.search 
{ 
    background-image:url('search.jpg'); 
    float: right; 
    width:200px; 
    height:40px; 
} 

CSS绝对

#Navigation 
{ 
    position: relative; 
} 
#Navigation ul 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#Navigation ul li 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
} 
#Navigation ul li a 
{ 
    display: block; 
    height: 40px; 
    width: 50px; 
} 
.search 
{ 
    position: absolute; 
    background-image:url('search.jpg'); 
    top: 0; 
    right: 10px; 
    width:200px; 
    height:40px; 
}