CSS: выравнивание по правому краю элемент на экране

Question

Я использую Twitter Bootstrap для моего CSS и следующий код имеет проблемы с выравниванием:

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