對齊水平導航菜單

我有一個水平導航欄。我想添加一個搜索欄到導航欄，但是當我插入它時，我的導航欄未對齊。對齊水平導航菜單

，你可以看到我的菜單，上面盤旋的綠線，以及右側的菜單更是徘徊。我希望將整個菜單對齊到綠線。

<li id="searchbar"> 
    <form id="search" method="post" style=""> 
    <input id="bb" type="text" style="" /> 
    <input id="cc" type="submit" value="Search" style="" /> 
    </form> 
</li>

這就是沒有搜索的情況。 https://jsfiddle.net/q476f585/（working）

來源

2016-02-22 raskoon

似乎您的尺寸和填充引起了問題，請參閱jsfiddle以獲取更新的解決方案。我所做的全部更新了padding和display的風格。對於下邊框，您必須確保前兩個按鈕上的其他填充正確。

來源

2016-02-22 06:49:30 Sphinx

您可以通過調整填充來解決問題。這是工作代碼。

ul#menu_left { 
 
    position: relative; 
 
    left: 100px; 
 
    width: 75%; 
 
    font: 75% verdana; 
 
    list-style-type: none; 
 
    padding: 10px 10px 5px 10px; 
 
    border-bottom: 1px solid green; 
 
} 
 
ul#menu_right { 
 
    padding-right: 10px; 
 
    float: right; 
 
    padding-top: 2px 
 
} 
 
ul#menu_left li { 
 
    display: inline; 
 
} 
 
ul#menu_left li a { 
 
    padding: 6px 4px; 
 
    border-bottom: 1px solid green; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: green; 
 
} 
 
ul#menu_left a:hover { 
 
    color: black; 
 
    background: yellow; 
 
    border-bottom: 1px solid yellow; 
 
} 
 
li#searchbar { 
 
    background-color: green; 
 
    padding: 6px 4px; 
 
    border-bottom: 1px solid green; 
 
} 
 
li#searchbar form { 
 
    display: inline; 
 
} 
 
li#searchbar input { 
 
    width: 50px; 
 
}

<ul id="menu_left"> 
 
    <li><a id="tab1" href="#">The We</a> 
 
    </li> 
 
    <li><a id="tab2" href="#">Book</a> 
 
    </li> 
 
    <li><a id="tab3" href="#">Tab</a> 
 
    </li> 
 
    <li id="searchbar"> 
 
    <form id="search" method="post"> 
 
     <input id="bb" type="text" /> 
 
     <input id="cc" type="submit" value="Search" /> 
 
    </form> 
 
    </li> 
 
    <ul id="menu_right"> 
 
    <li><a id="tab5" style="" href="#">Up</a> 
 
    </li> 
 
    <li><a id="tab6" href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
</ul>

來源

2016-02-22 06:53:16

對齊水平導航菜單

回答

相關問題