标签表单字段对齐CSS

Question

How can I make the labels of the form fields align vertically with the billing address heading? http://jsfiddle.net/DA9gK/1/

<h4 class="billingAddress">Billing Address</h4>

<div class="control-group">
    <label class="control-label" for="inputEmail">Company Name</label>
    <div class="controls">
        <input type="text" id="inputEmail">
    </div>
 </div>

Answer 1

Add

.form-horizontal .control-label {
     text-align: left;
  }

to your CSS part...Is this what you want?

Answer 2

Take a look at the css box model and if you can implement that, your spacing issues should go away. Floats are some else to consider, but... what you would benefit from specifically here... I can't find the link to, so do this:

<div id="head"></div>
<div id="nav"></div>
<div id="wrapper"></div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="footer"></div>

you can share a line between head & nav based on your style, your left form objects go into leftcolumn, right into right, footer holds its own line typically. This relies on absolute positioning of the wrapper and relative positioning of the everything else I believe. Floats work too, but are considered less flexible.

This approach should give you the kind of control over the spacing you need to make your page "fiddler" example look good.