चेक बॉक्स की एक सूची शैली का सबसे अच्छा तरीका क्या है

Question

चेक बॉक्स की एक सूची शैली का सबसे अच्छा तरीका क्या है

वोट

21

क्या मैं प्राप्त करना चाहते हैं इस तरह एक लेआउट है

कुछ लेबल [] चेकबॉक्स 1
            [] चेकबॉक्स 2
            [] चेकबॉक्स 3
            [] चेकबॉक्स 4

[] एक चेकबॉक्स का प्रतिनिधित्व करता है

क्या मार्कअप और सीएसएस सबसे अच्छा हो इस के लिए उपयोग करने के लिए चाहते हैं? मैं जानता हूँ कि यह एक मेज मैं सोच रहा हूँ के साथ क्या करने के लिए आसान हो सकता है अगर यह divs के साथ संभव है

css checkbox markup

04/08/2009 को 21:49
का स्रोत उपयोगकर्ता MarcS

अन्य भाषाओं में...

4 जवाब

Sean Bright · Answer 1 · 2009-08-04 21:53

वोट

5

<div style="float: left;">
    some label
</div>

<div style="float: left;">
    <input type="checkbox" />&#160;checkbox 1<br />
    <input type="checkbox" />&#160;checkbox 2<br />
    <input type="checkbox" />&#160;checkbox 3<br />
    <input type="checkbox" />&#160;checkbox 4
</div>

04/08/2009 को 21:53
का स्रोत उपयोगकर्ता Sean Bright

Magnar · Answer 2 · 2009-08-04 21:55

मैं इस मार्कअप का प्रयोग करेंगे:

<div id="checkboxes">
  <label>some label</label>
  <ul>
    <li><input type="checkbox"> checkbox 1</li>
    <li><input type="checkbox"> checkbox 2</li>
    <li><input type="checkbox"> checkbox 3</li>
    <li><input type="checkbox"> checkbox 4</li>
  </ul>
</div>

और इन शैलियों:

#checkboxes label {
  float: left;
}
#checkboxes ul {
  margin: 0;
  list-style: none;
  float: left;
}

टेबल्स बुराई नहीं हैं, लेकिन वे अधिक बार नहीं की तुलना में गलत कारणों के लिए इस्तेमाल कर रहे हैं। वे बड़ा html-फ़ाइलें (प्रदर्शन और बैंडविड्थ के लिए बुरा) के लिए बनाने के लिए, आम तौर पर एक अधिक अव्यवस्थित html-संरचना (रख-रखाव के लिए बुरा) के साथ। तालिका डेटा तथापि का सवाल है, वे उत्कृष्ट हैं।

You · Answer 3 · 2009-08-04 22:07

यह बहुत सिमेंटिक HTML:

<fieldset class="checkboxgroup">
    <p>some label</p>
    <label><input type="checkbox"> checkbox 1</label>
    <label><input type="checkbox"> checkbox 2</label>
    <label><input type="checkbox"> checkbox 3</label>
    <label><input type="checkbox"> checkbox 4</label>
</fieldset>

और यह काफी सरल सीएसएस:

.checkboxgroup{
    width: 20em;
    overflow: auto;
}
.checkboxgroup p{
    width: 7em;
    text-align: right;
}
.checkboxgroup label{
    width: 12em;
    float: right;
}

आवश्यकतानुसार चौड़ाई एडजस्ट करें।

यह वास्तव में क्या करने के लिए उचित तरीके को बदलने के लिए है pएक के साथ अपने HTML में तत्व legendतत्व है, लेकिन इस तरह से आप कुछ बहुत बदसूरत सीएसएस के बिना करने के लिए यह चाहते शैली नहीं होंगे।

Erv · Answer 4 · 2009-08-04 22:35

मेरी राय इसके अधिक एक मेज से सूची के कुछ प्रकार (लेकिन आप पूरी तस्वीर श्रेणी में नहीं रखा) में। मेरे लिए यह एक परिभाषा सूची की तरह दिखता है तो मैं इसका इस्तेमाल होता है (यदि नहीं मैं एक बिना क्रम वाली सूची उदाहरण से चिपके हैं Magnar समाधान, लेबल जोड़ने।

परिभाषा सूची संस्करण:

 <dl id="checkboxes">
        <dt>same label or term</dt>
        <dd><input type="checkbox" id="chk1" /><label for="chk1">checkbox 1</label></dd>
        <dd><input type="checkbox" id="chk2" /><label for="chk2">checkbox 2</label></dd>
        <dd><input type="checkbox" id="chk3" /><label for="chk3">checkbox 3</label></dd>
        <dd><input type="checkbox" id="chk4" /><label for="chk4">checkbox 4</label></dd>
  </dl>