выровнять текст в той же строке

Question

У меня есть html, который содержит 1 ярлык и 1 поле div содержит текст.

<label class="control-label col-xs-2">Name:</label> 
<div class="col-xs-10"> 
    <strong>Test</strong> 
</div> 

Но они, похоже, не расположены на одной линии. Here is the jsfiddle Может ли кто-нибудь помочь мне, как я могу выровнять их в одной строке.

Thanks

Answer 1

Я вижу, что вы используете бутстрап. У Bootstrap уже есть CSS по умолчанию для меток. поэтому, если вы не хотите, чтобы это произошло, удалите прокладку из элемента <label>.

Это будет выглядеть следующим образом:

.form-horizontal .control-label { 
    float: left; 
    width: 160px; 
    /* padding-top: 5px; */ 
    text-align: right; 
} 

Надеется, что это помогает, ура.

Answer 2

Применить padding-top к col-xs-10 в вашем CSS.

.col-xs-10 { 
padding-top: 5px; 
} 

Answer 3

Попробуйте

<div class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label class="control-label col-xs-2">Name:</label> 
    <div class="col-xs-10"> 
     <strong>Test</strong> 
    </div> 
    </div> 
</div> 

Answer 4

В начальной загрузке, если вы хотели бы иметь горизонтальную форму, которую она называется рядной. Таким образом, если вы измените свою «форму-горизонтальную» на «form-inline», вы достигнете этой горизонтальной пары ключ/значение. Ниже приведен html, который я изменил на ваш код. Надеюсь, это то, что вы ищете.

<div class="form-inline" role="form"> 
    <div class="form-group"> 
    <label for="control-label col-xs-12">Name:</label> 
    <input type="text" class="form-control col-xs-10" id="control-label"placeholder="text here">   
    </div> 
    </div> 

Кроме того, вы заметите, что я вставил входной тег. Это позволит посетителям сайта ввести значение.