css - cssでフォームをスタイリングする

Question

ここで初めて。cssを使用してフォームのスタイルを設定したいのですが、完全に失敗しました。フォームはhttp://opm.nulep.org/2012-10-17-04-17-46/alrep.htmlにあります

フィールドを縦の列に配置したいと思います。

Answer 1

各h3とドロップダウンdivは、幅200pxのフローティングdivに配置する必要があります。6pxの右マージン（最初の2つの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 2

この場合、<div>幅がそれぞれ 25% の s またはテーブルを使用することをお勧めします。テーブルは一般的にかさばるのでお勧めしませんが、単に選択肢を提供する目的でテーブルについて言及しています。

s で4 列のレイアウトを使用する場合は、<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>

繰り返しますが、レイアウトに表を使用することはお勧めしません。実際の表形式のデータには表を使用する方が良い方法ですが、初心者は通常、表の方が使いやすいと感じます。

幸運を。

Answer 3

3 つが 1 行に並んでいるということですか。

その場合、各フィールドの 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>