Ποιος είναι ο καλύτερος τρόπος για να το ύφος μια λίστα των πλαισίων ελέγχου

ψήφοι
21

Αυτό που θα ήθελα να επιτύχουμε είναι μια διάταξη, όπως αυτή

κάποια ετικέτα [] κουτάκι 1
            [] Checkbox 2
            [] Κουτάκι 3
            [] Κουτάκι 4

[] Αντιπροσωπεύει ένα κουτάκι

Τι σήμανση και CSS θα ήταν καλύτερο να χρησιμοποιήσετε για αυτό; Ξέρω ότι αυτό θα είναι εύκολο να κάνει με ένα τραπέζι αναρωτιέμαι αν αυτό είναι δυνατό με divs

Δημοσιεύθηκε 04/08/2009 στις 21:49
πηγή χρήστη
Σε άλλες γλώσσες...                            


4 απαντήσεις

ψήφοι
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
πηγή χρήστη

ψήφοι
25

Θα χρησιμοποιήσετε αυτήν τη σήμανση:

<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 (κακό για συντηρησιμότητα). Όσο για πίνακα δεδομένων, ωστόσο, είναι εξαιρετική.

Απαντήθηκε 04/08/2009 στις 21:55
πηγή χρήστη

ψήφοι
20

Αυτή η πολύ σημασιολογική 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>

Και αυτό το αρκετά απλή CSS:

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

Ρυθμίστε πλάτη, όπως απαιτείται.

Ο σωστός τρόπος για να γίνει αυτό είναι πραγματικά να αντικαταστήσει το pστοιχείο της HTML μου με ένα legendστοιχείο, αλλά αυτό δεν θα το στυλ με τον τρόπο που θέλετε να χωρίς κάποια πολύ άσχημο CSS.

Απαντήθηκε 04/08/2009 στις 22:07
πηγή χρήστη

ψήφοι
5

Κατά τη γνώμη μου, του πιο κάποιο είδος της λίστας από έναν πίνακα (αλλά δεν λίστα ολόκληρη την εικόνα). Για μένα μοιάζει με έναν κατάλογο ορισμό γι 'αυτό θα το χρησιμοποιήσει (αν δεν μπορώ να επιμείνουμε σε μια μη διατεταγμένη λίστα παράδειγμα το 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>
Απαντήθηκε 04/08/2009 στις 22:35
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more