CSS浮动右侧问题

Question

我正在设计我的页面，遇到了标题对齐的问题。

如您所见:

我希望 "Add" 与员工列表对齐。请问应该怎么做？

另外，这是 html 代码:

我使用了 bootstrap。但是原生的 css 建议仍然是好的。

    <div class="title">
                <h4>Employee list</h4> 
                <span class="pull-right">Add</span>
            </div>

谢谢

- Bajongskie

Answer 1

将 Add 移动到 <h4> 之前。当你使用右浮动时，如果想要它们对齐，目标元素应该在另一个元素之前。

演示

HTML

<div class="title">
     <span class="pull-right">Add</span>
     <h4>Employee list</h4> 
</div>

CSS

.pull-right {
    float:right;
}

- MrCode

---

谢谢。我从没想过这么简单..哈哈。顺便问一下，如果我把它放在h4底部，为什么它会掉下来？ - Bajongskie

因为h4是块级元素，所以它会占据100%的宽度。当你把span放在它下面时，即使浮动了，它也总是显示在h4下面。 - MrCode

Answer 2

给h4设置宽度为自适应并向左浮动

CSS

h4
{ 
float:left;width:auto
 }

和 span 浮动到右侧宽度自适应

.pull-right
{
 float:right;width:auto
}

- Shinov T