html div按钮靠右对齐,用CSS在Nav中右对齐按钮

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