用CSS在Nav中右對齊按鈕

我在嘗試使用CSS來佈局導航區域。我試圖讓我的項目是這樣的：用CSS在Nav中右對齊按鈕

+---------------------+ 
| header  [add] | 
| item 1    | 
| item 2    | 
|      | 
+---------------------+

在試圖做到這一點，我已經定義了以下HTML：

<nav style="width:100%; background-color:gray;"> 
    <div style="width:100%;"> 
    <h5 class="nav-title">header</h5> 
    <button class="btn pull-right" style="height:1.2rem;">add</button> 
    </div> 
    <span class="nav-item"> 
    <span class="icon icon-home"></span> 
    item 1 
    </span> 
    <span class="nav-item active"> 
    <span class="icon icon-light-up"></span> 
    item 2 
    </span> 
</nav>

我初步認識CSS是這樣的：

.nav-item { 
    padding: 2px 10px 2px 25px; 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.nav-item:active, .nav-group-item.active { 
    background-color: #dcdfe1; 
} 
.nav-item .icon { 
    width: 19px; 
    height: 18px; 
    float: left; 
    margin-top: -3px; 
    margin-right: 7px; 
    text-align: center; 
} 

.nav-title { 
    margin: 0; 
    padding: 10px 10px 2px; 
}

不幸的是，當渲染時，「添加」按鈕沒有正確對齊。雖然它的右對齊，它出現在「第1項」的同一行。我試圖弄清楚如何使「添加」按鈕與「標題」出現在同一行上。我究竟做錯了什麼？

來源

2015-10-20 user70192

你H5標籤被佔用的100％父母的寬度。將h5 css設置爲> display：inline-block;

寬度：50％

，做同樣以您的按鈕。或者如果您使用的彩車然後確保添加具有CSS屬性的按鈕下方的空div右浮動兩種H5和按鈕左右respectivly ：

明確：兩者;

否則，父div的高度將爲零。

對不起，如果在我的答覆格式不合格。這是我在手機應用程序上的第一個迴應。

來源

2015-10-20 15:00:10

放置該按鈕的頭之前並漂浮到右：

<nav style="width:100%; background-color:gray;"> 
    <div style="width:100%;"> 
    <button class="btn pull-right" style="height:1.2rem;">add</button> 
    <h5 class="nav-title">header</h5> 
    </div> 
    <span class="nav-item"> 
    <span class="icon icon-home"></span> 
    item 1 
    </span> 
    <span class="nav-item active"> 
    <span class="icon icon-light-up"></span> 
    item 2 
    </span> 
</nav>

CSS：

button { 
    float: right; 
    margin: 10px; 
}

實時預覽：JSFiddle

來源

2015-10-20 14:58:31 KittMedia

用CSS在Nav中右對齊按鈕

回答

相關問題