Question

我正在尝试使用CSS布局导航区域。我试图让我的项目看起来像这样：

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

不幸的是，当这呈现时，＆＃34;添加＆＃34;按钮未正确对齐。虽然它是右对齐的，但它与＆＃34;项目1和＃34;在同一行上显示。我试图找出如何制作＆＃34;添加＆＃34;按钮与＆＃34;标题＆＃34;出现在同一行。我做错了什么？

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

CSS：

button {
    float: right;
    margin: 10px;
}

实时预览：JSFiddle

Answer 2

你的h5标签占据了父母宽度的100％。将h5 css设置为＆gt; display：inline-block;

宽度：50％

使用按钮执行相同操作。或者分别左右浮动h5和按钮如果使用浮点数，请确保在具有css属性的按钮下方添加一个空div：

明确：两者;

否则父div的高度将为零。

很抱歉，如果我的回复格式不合适。这是我在手机应用程序上的第一个回复。

导航中的右对齐按钮与CSS

2 个答案: