如何使用css以类似网格的方式排列输入字段及其标签？

我正在尝试做一些必须相对简单的事情,但是我已经花了好几个时间来解决这个问题而且我没有得到答案.

我需要将一些输入字段及其图层布局在网格上(或者像我猜的那样)

lable     input      label input
label     input      label input

因为输入字段的宽度不同(如果宽度相同,看起来很糟糕),我设法得到的最好的是

label     input    label  input
label     logerinput    label  input

如何排列第二组标签并输入？

我为标签制作了两个课程

#dpi_form label { 
  display: inline-block; 
  width: 150px; 
  margin-left: 20px;
}
#dpi_form .right-label {
  display: inline-block;
  width: 150px;
  margin-left: 220px; 
}

和相关的控制是

<label for="req_retailer_index_fld">Select the retailer*:</label><select id="req_retailer_index_fld" name="req_retailer_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
  <label for="req_region_index_fld" class="right-label">Select the region*:</label><select id="req_region_index_fld" name="req_region_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />
  <label for="req_customer_type_index_fld">Select the customer type*:</label><select id="req_customer_type_index_fld" name="req_customer_type_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select>
  <label for="req_meter_state_index_fldi" class="right-label">Select the meter state*:</label><select id="req_meter_state_index_fld" name="req_meter_state_index_fld" class="required selectbox ui-widget-content"><option>item 1</option><option>item 2</option></select><br />

在一个div内.

我已经尝试过绝对定位,相对定位,填充,左右边距的所有方式,但仍然无法得到我追求的结果.

我可以找到大量的东西或控件的垂直对齐..但没有任何显示我如何做到这一点.

请问有什么线索吗？

彼得.

尽管我在你的问题上使用表格的评论,我就是这样做的.

CSS：

label,
input {
    display: block;
}
label {
    padding: 4px 0 0;
}
.labels1 {
    float: left;
    width: 80px;
}
.labels2 {
    float: left;
    width: 80px;
}
.inputs1 {
    float: left;
    width: 200px;
}
.inputs2 {
    float: left;
    width: 200px;
}

HTML：

<div class="labels1">
    <label for="input1">Input 1: </label>
    <label for="input2">Input 2: </label>
    <label for="input3">Input 2: </label>
</div>

<div class="inputs1">
    <input type="text" value="" name="input1" id="input1" />
    <input type="text" value="" name="input2" id="input2" />
    <input type="text" value="" name="input3" id="input3" />
</div>

<div class="labels2">
    <label for="input4">Input 4: </label>
    <label for="input5">Input 5: </label>
    <label for="input6">Input 6: </label>
</div>

<div class="inputs2">
    <input type="text" value="" name="input4" id="input4" />
    <input type="text" value="" name="input5" id="input5" />
    <input type="text" value="" name="input6" id="input6" />
</div>

然后,您可以将标签和输入类更改为所需的宽度.虽然我仍然认为桌子更容易,因为那时你不必担心自己设置宽度;您也不必担心与表的垂直对齐.