對齊導航欄中的元素

我試圖用搜索欄和登錄名實現一個小導航欄。我的問題是，通常我會使用display:flex但這次我想嘗試別的。因此，我決定給我的<li> - 元素屬性display:inline，當然，這對我來說並不適用。對齊導航欄中的元素

CSS：

* { 
    margin:0; 
    box-sizing:border-box; 
} 
html { 
    display:block; 
} 
body { 

    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 
    line-height: 1.42857143; 

} 

a { 
    color: #00B7FF; 
} 
.navbar-default { 
    position:relative; 
    min-height: 50px; 
    background-color: #f8f8f8; 
    border-color: #e7e7e7; 
} 

.container-fluid { 
    padding-right:30px; 
    padding-left:30px; 
    margin-left:auto; 
    margin-right:auto; 
} 

.navbar-default ul { 
    list-style: none; 
    display:inline; 
} 

.navbar-default li { 
    display:inline; 
}

HTML：

<nav class="navbar-default"> 
    <div class="container-fluid"> 
     <ul class="navbar-default nav"> 
      <li> 
       <div id="search" class="search-navbar"> 
        <input type="search"> 
        <input type="button" value="Search"> 
       </div> 
      </li> 
      <li> 
       <div id="login" class="login-navbar"> 
        <input type="text"> 
        <input type="password"> 
        <input type="button" value="Sign in"> 
       </div> 
      </li> 
     </ul> 
    </div> 
</nav>

這裏是工作提琴：https://jsfiddle.net/rvfd5h5e/

我想是把搜索欄左側（但不在邊緣）和登錄在右邊。

我希望有人能幫助我解決這個問題。

來源

2015-11-03 greedsin

嘗試了這一點使用display:inline-block和float:right

CSS

.navbar-default ul { 
    list-style: none; 
    display:block; 
    clear: both; 
    line-height: 3em; 
} 
.navbar-default li, .navbar-default li div { 
    display:inline-block; 
} 
.navbar-default li:last-child { 
    float: right; 
}

DEMO HERE

來源

2015-11-03 17:56:22

工作良好，但爲什麼我需要line-height：3em來定位在中心？ – greedsin

您可以使用很多技巧進行對中... line-height是其中之一 - http://vanseodesign.com/css/vertical-centering/ –

感謝您的鏈接，我會盡快標記您的答案 – greedsin

你可以讓你的顯示inline-block的，因此不會增加休息。

.navbar-default li { 
    display:inline-block; 
}

jsfiddle

來源

2015-11-03 17:59:00 santon

添加display:inline到兩個<div>

來源

2015-11-03 18:04:55 Beginner

您可以將這個CSS：

width: 50%; 
float: left; 
display: inline;

的DIV第一李和

display: inline; 
float: right;

內

上面的css for div在第二個li

來源

2015-11-03 18:09:43 Arun

對齊導航欄中的元素

回答

相關問題