Question

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

我需要使用

在网格上（或者像我猜的表格）布局一些输入字段及其图层

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

in div。

我尝试过绝对定位，相对定位，填充，各种左右边距，但仍无法得到我想要的结果。

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

有什么线索吗？

彼得。

6 个答案:

答案 0 :(得分：3)

答案 1 :(得分：1)

答案 2 :(得分：1)

答案 3 :(得分：1)

答案 4 :(得分：1)

答案 5 :(得分：0)

Answer 1

尽管我在你的问题上使用表格的评论，但这就是我要做的。

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>

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

Answer 2

使用表格，这就是它们的用途。

Answer 3

使用以下样式。

用于父容器

display: table;

用于行容器

display: table-row;

用于单元容器

display: table-cell;

示例

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      lable
    </div>  
    <div style="display: table-cell;">
      input
    </div>  
    <div style="display: table-cell;">
      label input
    </div>  
  </div>
  <div>
    <div style="display: table-cell;">
      lable
    </div>  
    <div style="display: table-cell;">
      input
    </div>  
    <div style="display: table-cell;">
      label input
    </div>  
  </div>
</div>

Answer 4

我建议使用表格或用于纯CSS解决方案可能是960网格系统960.gs

Answer 5

我会使用floats。这是一个jsfiddle显示我将如何做到这一点：

http://jsfiddle.net/pSsap/

我将重现下面的代码。

用这样的html：

<form class="grid">
    <section>
        <label for="wind">wind</label>
        <span class="field"><input id="wind" name="wind" type="input" class="regular"></span>
        <label for="earth">earth</label>
        <span class="field"><input id="earth" name="earth" type="input" class="regular"></span>
    </section>
    <section>
        <label for="fire">fire</label>
        <span class="field"><input id="fire" name="fire" type="input" class="long"></span>
        <label for="air">air</label>
        <span class="field"><input id="air" name="air" type="input" class="regular"></span>
    </section>
</form>

和css这样：

form.grid section {
    clear: both;
}

form.grid section label, form.grid section span.field {
    display: block;
    float: left;
}

form.grid section label {
    width: 50px;
}

form.grid section span.field {
    width: 150px;
}

input.regular {
    width: 100px;
}

input.long {
    width: 140px;
}

Answer 6

解决方案：

使用列表：<ol>或<ul>
设置该列表的宽度：（在示例中，960px是<ul>的宽度）
浮动列表：<li>并设置宽度以限制其浮点：（在示例中，320px是设置的宽度）
如果您希望与<label>和<select>对保持一致，请将宽度设置为<label> （确保将其设置为块级别element first：在示例中，<label>设置为160px）
请务必清除（clear: left）此列表（<ul>）后面的所有元素。

标记：

<ul>
    <li>
        <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>
    </li>
    <li>
        <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>
    </li>
    <li>
        <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>
    </li>
    <li>
        <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>
    </li>
</ul>

CSS

ul {
    background: #EEE;
    width: 960px;
}
li {
    background: #FFC0CB;
    float: left;
    list-style: none;
    width: 320px;
}
label {
    display: inline-block;
    width: 160px;
}

结果是，当<ul>不能再包含（因为你已经在其中设置了宽度）时，列表就会掉落。另一方面，<li>的宽度将始终使它们在浮动时彼此对齐。

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

6 个答案:

标记：

CSS