Facebook 风格的导航栏

Question

这是我的 Rails 应用程序中的导航栏。问题是我不确定这是否可以跨浏览器工作，因为我正在调整锚标记的填充以获得所需的高度。另一个问题是搜索表单位于该导航栏内，并且不是在其中垂直居中。

我基本上想要一个 Facebook 风格的导航栏，它有一些像链接（带有悬停）的框和一个搜索表单（一个文本框和一个搜索图像都集成/看起来无缝）。右侧的搜索文本框和按钮不是无缝的，它们看起来是分开的。

帮助表示赞赏。

<div class="span-24 last nav_container ui-state-default">
            <div class="main_links_div span-18">
              <ul><li id="home_nav"><a href="/">New</a></li><li id="post_nav"><a href="/post_topics">posts</a></li><li id="cat_nav"><a href="#">Categories</a></li><li id="city_nav"><a href="#">Cities</a></li></ul>
            </div>
            <div class="span-6 last div-search-form"><form method="get" id="search_form" class="right" action="/searches">
              <input type="text" value="City_Name" name="search_term" id="search_term" class="search-term">
                   <span class="small-button"><a id="search_button" href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Search"><span class="ui-button-icon-primary ui-icon ui-icon-search"></span><span class="ui-button-text">Search</span></a></span>
                   </form>
            </div>
          </div>

CSS

main_links_div {
margin-bottom:0.4em;
vertical-align:baseline;
}

main_links_div ul {
display:inline;
margin-bottom:0 !important;
padding-left:0;
white-space:nowrap;
}

main_links_div li {
display:inline;
}

main_links_div li a {
font-size:1em;
padding:0.7em 0.8em;
}

right {
float:right;
}
small-button {
font-size:0.8em;
}

Answer 1

看起来您正在使用某种您未指定的网格框架，但是，我很确定这就是您所追求的：

#nav_container{
overflow:auto;
}

.main_links_div {
margin-bottom:0.4em;
}

.main_links_div ul {
margin-bottom:0 !important;
padding-left:0;
list-style:none;
}

.main_links_div li {
float:left;
}

.main_links_div li a {
font-size:1em;
height:1em;
padding:0.7em 0.8em;
}

#search_form {
float:left;
margin-left:5em;
}

.small-button {
font-size:0.8em;
}

还记得添加“.”。在你的班级名称之前！