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

css：右对齐元素在屏幕外

2 个答案: