검색 막대 위치 지정 도움

Question

정렬되지 않은 링크를 사용하고 ui 효과에 jquery를 사용하는 내 탐색 막대가 있습니다. 이것은 잘 작동합니다. 이제 막대의 테마와 일치하는 탐색 모음을 디자인하고 탐색 막대의 오른쪽에 배치하고 싶습니다. 좀 vimeo 웹 사이트처럼 ..

문제는 내가 jquery 효과가 검색 표시 줄에 적용되고 싶지 않아 같은 목록에 포함 할 수 없다는 것입니다. 어떻게 그것을 탐색 표시 줄의 오른쪽에 배치합니까 ??

은을 heres 내가 노력 CSS하지만 나던 작업

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

width:200px; 
height:40px; 

} 

여기에 가장 좋은 옵션은 전체 레이아웃에 따라 몇 가지 옵션이 있습니다

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

Answer 1

html로에게 간다. 여기에는 가로 방향 탐색 목록과 검색을 서로 인라인 방식으로 두 가지 기본 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 플로트

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