在同一行上对齐文本

Question

I have an html which contains 1 label and 1 div box contains a text.

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

But they seem not located on the same line. Here is the jsfiddle Could anyone help me how can I align them on the same line.

Thanks

Answer 1

I see you are using bootstrap. Bootstrap already has default CSS for labels. so if you don't want that to happen remove the padding from the <label> element.

It will look like this:

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

Hope this helps, Cheers.

Answer 2

Apply padding-top to the col-xs-10 in your CSS.

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

Answer 3

Try this

<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

In bootstrap if you would like to have a horizontal form it is called inline. So, if you change your "form-horizontal" to "form-inline" you will achieve that horizontal key/value pair. Below is the html that I changed to your code. I hope this is what you are looking for.

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

In addition, you will notice that I have inserted an input tag. This is what will allow site visitors to input the value.