複数のチェックボックスをグリッドのように配置します。テーブルなし？

Question

私は現在、多くのチェックボックスを備えた大きな形式で作業しています。 グリッドのように表示する方法はありますか？ 4列？

私はテーブルでこれを行うことができますが、本当に必要でない場合は、実際にスタイルを使用する必要はありません。それでは、CSSのやり方はありますか？

例：
[]テキスト[]テキスト[]テキスト[]テキスト
[]テキスト[]テキスト[]テキスト[]テキスト
...

Answer 1

は、完全なチェックボックスのマークアップとCSSで、ソリューションであり、かつ実例

HTML

<ul class="checkbox-grid"> 
    <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</label></li> 
    <li><input type="checkbox" name="text2" value="value2" /><label for="text2">Text 2</label></li> 
    <li><input type="checkbox" name="text3" value="value3" /><label for="text3">Text 3</label></li> 
    <li><input type="checkbox" name="text4" value="value4" /><label for="text4">Text 4</label></li> 
    <li><input type="checkbox" name="text5" value="value5" /><label for="text5">Text 5</label></li> 
    <li><input type="checkbox" name="text6" value="value6" /><label for="text6">Text 6</label></li> 
    <li><input type="checkbox" name="text7" value="value7" /><label for="text7">Text 7</label></li> 
    <li><input type="checkbox" name="text8" value="value8" /><label for="text8">Text 8</label></li> 
</ul> 

CSS

.checkbox-grid li { 
    display: block; 
    float: left; 
    width: 25%; 
} 

チェックアウトここで働い例：http://jsfiddle.net/FmV9k/

Answer 2

あなたは、チェックボックスをフロートして与えることができます親コンテナの幅はそれぞれ25％です。

Answer 3

は、あなたは確かにそうするのdivのを使用して、このようなことができ

<div> 
<ul class="chk"> 
<li>checkbox</li> 
<li>checkbox</li> 
<li>checkbox</li> 
<li>checkbox</li> 

<li>checkbox</li> 
<li>checkbox</li> 
<li>checkbox</li> 
<li>checkbox</li> 

</ul> 
</div> 


.chk 
{ 
    width:100%; 
} 
.chk li 
{ 
    display:inline-block; 
    width:25%; 
} 

Answer 4

UL李を試してみてください、しかしテーブルを恐れてはいけません。彼らは適切なアプリケーションを持っていますし、あなたがそれらを使用してワラントをしようとしている場合はそれらを使用する必要があります。ここで

はdiv要素に基づくCSSのソリューションです：http://jsfiddle.net/XugFX/

HTML

<div class="row"> 
    <div class="col"><input type="checkbox" /><label>Box 1</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 2</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 3</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 4</label></div> 
</div> 
<div class="row"> 
    <div class="col"><input type="checkbox" /><label>Box 5</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 6</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 7</label></div> 
    <div class="col"><input type="checkbox" /><label>Box 8</label></div> 
</div> 

CSSここで

.row { 
    border: 1px solid red; 
    overflow: hidden; 
    padding: 5px; 
} 

.col { 
    border: 1px solid blue; 
    float: left; 
    padding: 5px; 
    margin-right: 5px; 
} 

Answer 5

することができますので、列のプロパティは、このタスクの罰金の選択をしますそれは非常に簡単に応答します。

http://jsfiddle.net/FmV9k/1/（含まれていない接頭辞）

.checkboxes { 
    columns: 4 8em; 
} 


<ul class="checkboxes"> 
    <li><label><input type="checkbox" name="text1" value="value1" />Text 1</label></li> 
    <li><label><input type="checkbox" name="text2" value="value2" />Text 2</label></li> 
    <li><label><input type="checkbox" name="text3" value="value3" />Text 3</label></li> 
    <li><label><input type="checkbox" name="text4" value="value4" />Text 4</label></li> 
    <li><label><input type="checkbox" name="text5" value="value5" />Text 5</label></li> 
    <li><label><input type="checkbox" name="text6" value="value6" />Text 6</label></li> 
    <li><label><input type="checkbox" name="text7" value="value7" />Text 7</label></li> 
    <li><label><input type="checkbox" name="text8" value="value8" />Text 8</label></li> 
</ul> 

我々は4列を指定したが、彼らは広い8emの最小値でなければなりません。 4列すべてに十分な余裕がない場合は、最小幅が確実に満たされるように必要に応じて列を削除します。 http://jsfiddle.net/7gdgQ/1/（がコメント化されている）

と幸運：

Answer 6

は "float:left;display:table-cell" と疑似クラス ":nth-child" と、このうち "float:none"

チェックをお試しください！