помогите позиционировать панель поиска

Question

Моя панель навигации использует неупорядоченные ссылки и использует jquery для эффектов пользовательского интерфейса. Это отлично работает. Теперь я разработал панель поиска, которая соответствует теме панели и хочу расположить ее справа от панели навигации. вроде как на сайте 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;
}