我在尝试使用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项”的同一行。我试图弄清楚如何使“添加”按钮与“标题”出现在同一行上。我究竟做错了什么?