0

これが私のレールアプリのナビゲーションバーです。問題は、アンカータグのパディングを調整して必要な高さを取得しているため、これがクロスブラウザーで機能するかどうかわからないことです。もう 1 つの問題は、検索フォームがこのナビゲーション バーの内側にあり、垂直方向の中央に配置されていないことです。

私は基本的に、リンクのようないくつかのボックス（ホバー付き）と検索フォーム（テキストボックスと検索画像の両方が統合されている/シームレスに見える）を備えた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;
}
4

1 に答える 1

0

指定していないある種のグリッド フレームワークを使用しているように見えますが、これがあなたが求めているものであると確信しています。

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

また、忘れずに「.」を付けてください。クラス名の前に！

于 2010-09-13T18:38:00.237 に答える