幫助定位搜索欄

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; 
}