cssやテーブルのないチェックボックスを整列させますか？

Question

私は、次のようなHTMLフォームを使用している場合：

<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data"> 
Test: 
<input name="checkboxes[]" value="Test" type="checkbox"> 
<br> 
TestTestTest: 
<input name="checkboxes[]" value="Test" type="checkbox"> 
<br> 
TestTestTestTestTestTest: 
<input name="checkboxes[]" value="Test" type="checkbox"> 
<br> 
TestTestTestTestTestTestTestTestTestTestTest:  
<input name="checkboxes[]" value="Test" type="checkbox"> 
<br> 
<input name="Submit" value="submit" type="submit"> 
</form> 

それは彼らが労働組合であるように、テーブルやCSSが、純粋なHTMLを使用せずに、チェックボックスを整列させることは可能ですか？そうでなければ、どのCSSを使うべきですか？

Answer 1

<label>タグで各ラベルを囲む：

<label for="checkboxes1">Test:</label> 
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox"> 

は、ラベルに幅を与える：

label { 
    display: inline-block; /* try "block" instead if this fails in IE */ 
    min-width: 5em; 
} 

べきパッドのテキストボックスアウトきれいに。追加ボーナスとして、ラベルをクリックすると、ブラウザのフォーカスがテキストボックスに表示されます。

Answer 2

私はなぜそれをしたいのかわかりません。

これはあなたのCSSの指示には合致しませんが、実際にはの外部のCSSが必要な場合はインラインスタイルを使用できます。

おそらくあなたは、あなたが探しているのツールをしている 

CSSを使用（およびより少ないextent-テーブルへの）可能性があります。

を編集するもう1つの方法は、ゴーストピクセル画像です。 1x1のアルファ透明なpngの画像で、高さと幅の属性を使用して、どれくらいスペースを空けたいかを指定します。物事がきちんとクリアされるようにするには、インラインCSSが必要かもしれません。

Answer 3

最も簡単な方法は、単に右にそれらをすべて揃えることであろう。私は、 "align"属性がフォーム要素で機能するかどうかはわかりませんが、それを試してみるか、divやp要素のコードをalign="right"でラップすることができます。

CSSが優れたソリューションです。フォームにクラスを追加し、CSSルールtext-align: right;を使用するか、単にstyle="text-align: right"をフォーム要素に直接追加します。

Answer 4

記事Applying CSS to formsは、垂直エッジに沿って並ぶように右への入力を引き起こすsylingラベルの例をいくつか持っています。

つまり、右のまたはラジオボタンとチェックボックスにラベルを配置するのは、ユーザーインターフェイスの設計における規約です。そのコンベンションに従えば、すべてのチェックボックスが幅を共有するので、それらは自分で整列します。

Answer 5

あなただけのunorderdedリストにあなたのラベルと入力を置くことができます。アラインメントを得るために、テキストは、彼が「CSSなし」言わなかった入力/

<ul> 
    <li> 
     <label><input /> Some Text</label> 
    </li> 
</ul> 

または

<ul> 
    <li> 
     <input /><label for="">Some Text</label> 
    </li> 
</ul> 

リッチ