我在尝试使用CSS来布局导航区域。我试图让我的项目是这样的:用CSS在Nav中右对齐按钮
+———————+
| header [add] |
| item 1 |
| item 2 |
| |
+———————+
在试图做到这一点,我已经定义了以下HTML:
header
add
item 1
item 2
我初步认识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项”的同一行。我试图弄清楚如何使“添加”按钮与“标题”出现在同一行上。我究竟做错了什么?