如何在按钮中将按钮与图例对齐？

Question

在表单内部，我有一个带按钮的图例：

<legend>Welcome Fictitious Employees
    <div class="pull-right">
        <button type="button" class="btn btn-primary" id="btnSave">Save</button>
    </div>        
</legend>

该按钮在IE和Firefox中合理地与图例的下边框对齐，而在Chrome中按钮呈现在该线上：

如何将按钮底部与线对齐？

Answer 1

使用bootstrap - 所有浏览器都应该相同。基本上是因为你用右拉类浮动了按钮。

<legend>

    <div class="row">
      <div class="col-xs-8 text-left">
        <p>Welcome Fictitious Employees</p>
      </div>
      <div class="col-xs-4 text-right">
        <button type="button" class="btn btn-primary " id="btnSave">Save</button>
      </div>
    </div 
</legend>

要稍微实现按钮和段落的垂直对齐，请使用这些css规则

p {
  margin: 0;
  line-height: 35px;
}

缺点是线高是固定的，所以如果你改变按钮填充或尺寸，你会再次出现不一致的情况，所以请记住这一点。