web-dev-qa-db-ja.com

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

現在、多数のチェックボックスを備えた大きなフォーミュラに取り組んでいます。それらをグリッドのように表示する方法はありますか。 4列？

私はあなたがテーブルでこれを行うことができることを知っていますが、それが本当に必要でなければ、それらをスタイルの作成に使用したくないのです。 CSSを使用する方法はありますか？

例：
[] text [] text [] text [] text
[] text [] text [] text [] text
...

htmlcssformslayoutcheckbox
10
h3ader

以下は、完全なチェックボックスマークアップと[〜＃〜] css [〜＃〜]を使用したソリューションと、実際の例です。

.checkbox-grid li {
  display: block;
  float: left;
  width: 25%;
}
<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>
35
Axel

「float:left;display:table-cell "および疑似クラス" :nth-child "および" float:none "

これをチェックしてください： http://jsfiddle.net/7gdgQ/1/ （コメント付き）

そして成功を祈る！

3
gmo

非常に簡単に応答させることができるため、columnsプロパティはこのタスクに最適です。

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つの列すべてに十分なスペースがない場合、必要に応じて列が削除され、最小幅が満たされます。

3
cimmanon

Ul liを試す

<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%;
}
3
Harshit Tailor

あなたは確かにそうするためにdivなどを使うことができますが、テーブルを恐れないでください。それらは適切なアプリケーションを持っているので、あなたがしようとしていることがそれらを使用することが保証されるなら、あなたはそれらを使うべきです。

これは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;
}
1
Michael

チェックボックスをフロートさせ、それぞれに親コンテナの25％の幅を与えることができます。

0
Eric Goncalves