帮助定位搜索栏 [英] help positioning the search bar
问题描述
我有我的导航栏使用无序链接和使用jquery ui效果。这工作正常。现在我设计了一个搜索栏,它匹配的主题的酒吧,并希望将其定位到导航栏的右侧。有点像vimeo网站..
I have my navigation bar using unordered links and using jquery for ui effects. This works fine. Now I have designed a search bar which matches the theme of the bar and wanna position it to the right of the nav bar. kinda like the vimeo website..
问题是,我不能将它包含在同一个列表中,我不想要的jquery效果应用于搜索栏。如何将其放置在导航栏右侧?
The problem is that i cannot include it in the same list cos i dont want the jquery effects to be applied to the search bar. How do i position it to the right of nav bar??
尝试的css,但不工作
Heres the css i tried but doesnt work
.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>
推荐答案
有几个选项最好的选项取决于你整个布局。以下是水平导航列表的两个基本CSS实现,以及彼此之间的内联搜索。
There are a couple options The best option depends on your entire layout. Here are two basic CSS implementations of horizontal navigation list and search inline with each other.
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;
}
这篇关于帮助定位搜索栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!