css - 使用 css 设置表单样式

Question

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

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

Answer 1

好吧，在这种情况下，我建议使用<div>宽度为 25% 的 s 或表格。桌子通常比较笨重，不推荐使用，尽管我提到它们纯粹是为了给你一个选择。

如果您想使用<div>s 的四列布局，请尝试以下操作：

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

同样，我不建议使用表格进行布局，因为将它们用于实际表格数据是一种更好的做法，但初学者通常会发现表格更易于使用。

祝你好运。

Answer 2

您应该将每个 h3 和下拉 div 放在一个宽度为 200px 的浮动 div 中。6px 的右边距（对于前两个 div 包装器）在它们三个之间保持一点距离。

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 中，这将有一个近似值。一个 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。每个解决方案都有优点和缺点。

分区解决方案：

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