导航中的右对齐按钮与CSS对齐

我正在尝试使用CSS布局一个导航区域。我试图使我的物品看起来像这样：

+---------------------+
| header        [add] |
|  item 1             |
|  item 2             |
|                     |
+---------------------+

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

为了做到这一点，我定义了以下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>      

---

不幸的是，在渲染时，“添加”按钮没有正确对齐。其右对齐时，显示在与“项目1”相同的行上。我想知道如何使“添加”按钮与“标题”显示在同一行上。我做错了什么？

将按钮放在收割台之前，并将其向右浮动：

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

---

实时预览：

将按钮放在标题前，并将其向右浮动：

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

---

现场预览：

您的h5标签占据了家长宽度的100%。将h5 css设置为>显示：内联块

宽度：50%

用你的按钮也一样。 或者将h5和按钮分别左右浮动 如果使用浮动，请确保在具有css属性的按钮下方添加一个空div：

明确：两者皆有

否则，父div的高度将为零

---

对不起，如果我的答复格式不正确。这是我在手机应用程序上的第一个回应。

您的h5标签占据了100%的宽度。将h5 css设置为>显示：内联块

宽度：50%

用你的按钮也一样。 或者将h5和按钮分别左右浮动 如果使用浮动，请确保在具有css属性的按钮下方添加一个空div：

明确：两者皆有

否则，父div的高度将为零

对不起，如果我的答复格式不正确。这是我在手机应用程序上的第一个回复