css - css：右对齐元素在屏幕外

Question

我正在为我的 css 使用 twitter bootstrap，以下代码存在对齐问题：

在此处查看 jsfiddle：http: //jsfiddle.net/graphicsxp/99rhF/ （确保放大 html 视图）

<div class="view-header">
 <span class="view-title">Recherche de mandats</span>
<div class="pull-right">
<a style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
    <span class="pointer">more options</span>
</a>
<form class="form-inline pull-left" placeholder="N° de contrat, nom/numéro de client" css-class="input-xxlarge">
    <input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model">
    <button disabled="disabled" class="btn btn-info" type="submit"><i class="icon-search"></i>&nbsp;Rechercher</button>
</form>
</div>
 <div class="clearfix"></div>

<div class="pull-right">
</div>
 <div class="clearfix"></div>

    </div>

如您所见，带有“Rechercher”标签的按钮太靠右了。我究竟做错了什么 ？

Answer 1

您的按钮没有任何问题，它是包含元素。

更新css：

 .view-header {
    background-color: #F5F5F5;
    border-bottom: 1px solid #BBBBBB;
    margin-bottom: 20px;
    padding: 10px 20px;
}

删除width: 100%;Div 是块行元素，这意味着它们将填充其父元素。这应该可以解决您的问题。

见：http: //jsfiddle.net/99rhF/2/

Answer 2

父元素的宽度为 100%，但填充不包含在宽度计算中，因此最终为 100% + 40px。您可以通过将内容包装在容器中并对其进行填充来解决此问题。

http://jsfiddle.net/ndTuL/

.view-header {
    background-color: #f5f5f5;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: solid 1px #bbbbbb;
}

.content-wrap {
        padding: 10px 20px 10px 20px;
}