Кнопка правого выравнивания в Nav с CSS

Question

Я пытаюсь настроить область навигации с помощью CSS. Я стараюсь, чтобы мои вещи выглядеть следующим образом:

+---------------------+ 
| 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>  

Мой relavant 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». Я пытаюсь понять, как заставить кнопку «добавить» появиться в той же строке, что и «header». Что я делаю не так?

Answer 1

Ваш h5 тег принимает до 100% родители ширины. Установите h5 css для отображения: inline-block;

ширина: 50%

И сделать то же самое с кнопкой. Или плавать как h5 и левую кнопку и правый respectivly При использовании поплавков, то убедитесь, чтобы добавить пустой Div прямо под кнопкой, которая имеет свойство CSS:

ясно: как;

В противном случае высота родительского div будет равна нулю.

Извините, если в моем ответе этот формат неуловим. Это мой первый ответ на телефонное приложение.

Answer 2

Поместите кнопку перед заголовком и плывут вправо:

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

Live Preview: JSFiddle