Align Div/Checkbox в Div с помощью CSS

Question

Существует следующий код:

<div class="form-group ng-scope"> 
    <label class="col-sm-3 control-label" for="without_duration">Without duration</label> 
    <div class="col-sm-9"> 
    <input class="ng-untouched ng-valid ng-dirty ng-valid-parse" type="checkbox" ng-model="news.without_duration" name="without_duration"> 
    </div> 
</div> 

Проблема заключается в следующем: у меня есть некоторый текст в метке, но флажок не выровнен с меткой по вертикали. Как я могу это исправить?

Answer 1

Так как они плавают, добавьте margin-top в div, содержащий флажок, чтобы он выравнивался по вертикали с меткой.

Answer 2

Эта часть CSS может спасти вас быстро:

label, input{ 
    float: left; 
} 

но дают некоторый класс маркировать и вход, потому что вы не хотите, чтобы повлиять на все входы и ярлыки на вашем сайте. Codepen Sample

Answer 3

Просто

label { 
    display: inline-block; 
} 
.col-sm-9 { 
    display: inline-block; 
} 

Даст свой желаемый результат.

Проверить Fiddle

Answer 4

Ну вам просто нужно использовать загрузочный класс pull-left на label и div, как показано here

<div class="form-group ng-scope"> 
    <label class="col-sm-3 control-label pull-left" for="without_duration">Without duration</label> 
    <div class="col-sm-9"> 
    <input class="ng-untouched ng-valid pull-left ng-dirty ng-valid-parse" type="checkbox" ng-model="news.without_duration" name="without_duration"> 
    </div> 
</div> 

Проблема: Как div является display: block; поэтому флажок Гото следующая строка. ..

Решение: JSFIddle, применять float: left; к label и div !!

Answer 5

Пожалуйста, проверьте ниже я eneter детали

<div class="form-group ng-scope"> 
 
    <div class="col-sm-9"> <label class="col-sm-3 control-label" for="without_duration">Without duration</label> 
 

 
    <input class="ng-untouched ng-valid ng-dirty ng-valid-parse" type="checkbox" ng-model="news.without_duration" name="without_duration"> 
 
    </div> 
 
</div> 
 
</pre> 
 
or 
 

 
<div class="form-group ng-scope"> 
 
    <label class="col-sm-3 control-label" for="without_duration">Without duration</label> 
 

 
    <input class="ng-untouched ng-valid ng-dirty ng-valid-parse" type="checkbox" ng-model="news.without_duration" name="without_duration"> 
 
    
 
</div>