html - CSS浮动正确问题

Question

我正在设计我的页面，但我在对齐页眉时遇到了麻烦。正如你在这里看到的：

我希望“添加”与员工列表保持一致。我该怎么做？

顺便说一下，这是 html 代码：我使用过bootstrap。但是原生 css 建议还是不错的。

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

谢谢

Answer 1

将Addto 移到<h4>. 当您向右浮动时，如果您希望它们对齐，则目标元素应该在另一个元素之前。

演示

HTML

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

CSS

.pull-right {
    float:right;
}

Answer 2

给 h4 宽度自动并左浮动

CSS

h4
{ 
float:left;width:auto
 }

和跨度浮动右宽度自动

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