Databases
StackOverflow2013
Postsdbo
POHow do I line up input fields and their labels in a grid like manner with css?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I line up input fields and their labels in a grid like manner with css?
    text
    copied!<p>I'm trying to do something that must be relatively easy, but I've spent hours mucking around with this and I'm no getting to the answer.</p> <p>I need to layout some input fields and their layers on a grid (or like a table I guess) with </p> <pre><code>lable input label input label input label input </code></pre> <p>Because the input fields are different widths (and would look pretty crappy if they were all the same width) the best I've managed to get is</p> <pre><code>label input label input label logerinput label input </code></pre> <p>How do I line up the second set of labels and there inputs?</p> <p>I've made two classes for the labels </p> <pre><code>#dpi_form label { display: inline-block; width: 150px; margin-left: 20px; } #dpi_form .right-label { display: inline-block; width: 150px; margin-left: 220px; } </code></pre> <p>and the associated controls are</p> <pre><code> &lt;label for="req_retailer_index_fld"&gt;Select the retailer*:&lt;/label&gt;&lt;select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content"&gt;&lt;option&gt;item 1&lt;/option&gt;&lt;option&gt;item 2&lt;/option&gt;&lt;/select&gt; &lt;label for="req_region_index_fld" class="right-label"&gt;Select the region*:&lt;/label&gt;&lt;select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content"&gt;&lt;option&gt;item 1&lt;/option&gt;&lt;option&gt;item 2&lt;/option&gt;&lt;/select&gt;&lt;br /&gt; &lt;label for="req_customer_type_index_fld"&gt;Select the customer type*:&lt;/label&gt;&lt;select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content"&gt;&lt;option&gt;item 1&lt;/option&gt;&lt;option&gt;item 2&lt;/option&gt;&lt;/select&gt; &lt;label for="req_meter_state_index_fldi" class="right-label"&gt;Select the meter state*:&lt;/label&gt;&lt;select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content"&gt;&lt;option&gt;item 1&lt;/option&gt;&lt;option&gt;item 2&lt;/option&gt;&lt;/select&gt;&lt;br /&gt; </code></pre> <p>within a div.</p> <p>I've tried absolute positioning, relative positioning, padding, all manner of right and left margins but still can't get the result I'm after.</p> <p>I can find heaps of stuff or vertical alignment of controls.. but nothing showing me how to do this one.</p> <p>Any clues please?</p> <p>Peter.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload