Question

第一次来这里。我想用css设置一个表单，但完全失败了。表格位于http://opm.nulep.org/2012-10-17-04-17-46/alrep.html

我希望这些字段位于垂直列中。

Answer 1

嗯，在这种情况下，我建议使用每个25％宽度的<div>或表格。桌子通常比较笨重，不推荐，但我纯粹是为了给你一个选择。

如果您想使用带有<div>的四列布局，请尝试以下方法：

<form>
    <div style="width: 25%; float: left;">Contractor options here...</div>
    <div style="width: 25%; float: left;">District options here...</div>
    <div style="width: 25%; float: left;">Subcounty options here...</div>
    <div style="width: 25%; float: left;">End date options here...</div>
</form>

我建议将style选项移动到外部样式表或内部样式表（因此要么是stylesheet.css文件，要么只是<style>标记之间的文件顶部）。

对于表格，请遵循以下内容：

<form>
    <table>
        <tr>
            <td>Contractor options here...</td>
            <td>District options here...</td>
            <td>Subcounty options here...</td>
            <td>End date here...</td>
        </tr>
    </table>
</form>

同样，我不建议使用表格进行布局，因为将它们用于实际的tabular data会更好，但初学者通常会发现表格更容易使用。

祝你好运。

Answer 2

你应该把每个h3＆amp; dropdown div，浮动div，宽度为200px。 6px的右边距（对于前两个div包装器）在它们中的3个之间保持一点距离。

html（4次）：

<div class="dropdown_wrapper">
  <h3 ...>
  <div>...</div>
</div>

在css样式表中：

.dropdown_wrapper { float: left; width: 200px; margin-right: 6px; }
.dropdown_wrapper:last-child { margin-right: 0 }

Answer 3

你的意思是让三个人在一条线上相邻吗？

在这种情况下，您可以将h3和div包装在另一个div中的每个字段中，这将具有aapprox。 300px宽度和浮子。

HTML

<form>
   <div class="column">
      <h3>...</h3>
      <div>form item</div>
   </div>
   <div class="column">
      <h3>...</h3>
      <div>form item</div>
   </div>
   <div class="column last">
      <h3>...</h3>
      <div>form item</div>
   </div>
</form>

CSS

.column {float: left; width : 300px; margin-right : 10px;}
.last {margin-right: 0;}

然后你调整宽度和边距以适合你的母亲div！

Answer 4

您可以使用表格或一些浮动的div。每种解决方案都有利有弊。

Div解决方案：

<style type="text/css">
    .column { width: 200px; float: left; }
    .clear { clear: both }
</style>
<form>
    <div class="column">
        <input />
        ...
    </div>
    <div class="column">
        <input />
        ...
    </div>
    <div class="clear"></div>
</form>

表：

<form>
    <table>
        <td>
            <input />
            ...
        </td>
        <td>
            <input />
            ...
        </td>
    </table>
</form>

用css打造一个表单

4 个答案: