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

  • Post author:
  • Post category:其他


我在尝试使用CSS来布局导航区域。我试图让我的项目是这样的:用CSS在Nav中右对齐按钮

+———————+

| header [add] |

| item 1 |

| item 2 |

| |

+———————+

在试图做到这一点,我已经定义了以下HTML:

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