एक ग्रिड की तरह कई चेकबॉक्स व्यवस्थित करें। टेबल के बिना?

Question

मैं वर्तमान में बहुत सारे चेकबॉक्स के साथ एक बड़े फॉर्मूलेर पर काम कर रहा हूं। क्या उन्हें ग्रिड की तरह प्रदर्शित करने का कोई तरीका है, उदा। 4 कॉलम?

मुझे पता है कि आप इसे टेबल के साथ कर सकते हैं लेकिन मैं वास्तव में शैली की चीजों के लिए उनका उपयोग नहीं करना चाहता हूं यदि यह वास्तव में आवश्यक नहीं है। तो सीएसएस के साथ कोई रास्ता है?

उदाहरण:
[] पाठ [] पाठ [] पाठ [] पाठ
[] पाठ [] पाठ [] पाठ [] पाठ
...

Answer 1

यहाँ, एक समाधान है, पूरा चेकबॉक्स मार्कअप और सीएसएस के साथ है और एक कामकाजी उदाहरण।

एचटीएमएल

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

सीएसएस यहाँ काम उदाहरण

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

चेक आउट: http://jsfiddle.net/FmV9k/

Answer 2

आप चेक बॉक्स नाव और दे सकते हैं प्रत्येक माता-पिता कंटेनर के 25% की चौड़ाई।

Answer 3

कोशिश उल ली

<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

आप निश्चित रूप से div के और उपयोग कर सकते हैं ऐसा करने के लिए, हालांकि तालिकाओं का डर नहीं है इस तरह के। उनके पास प्रासंगिक अनुप्रयोग हैं और यदि आप उनका उपयोग करके वारंट करने की कोशिश कर रहे हैं तो आपको उनका उपयोग करना चाहिए।

यहाँ एक div आधारित सीएसएस समाधान है: http://jsfiddle.net/XugFX/

एचटीएमएल

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

सीएसएस

.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 कॉलम के लिए पर्याप्त जगह नहीं है, तो यह न्यूनतम मात्रा को पूरा करने के लिए आवश्यक कॉलम को हटा देगा। "float:left;display:table-cell" और छद्म वर्ग ":nth-child" और "float:none"

जाँच इस बाहर के साथ

Answer 6

प्रयास करें: http://jsfiddle.net/7gdgQ/1/ (टिप्पणी की है)

और अच्छी किस्मत!