Jaki jest najlepszy sposób na styl listy wyboru

Question

Jaki jest najlepszy sposób na styl listy wyboru

głosy

21

Co chciałbym osiągnąć to układ tak

część etykiety [] pole 1
            [] Pole 2
            [] Pole 3
            [] Wyboru 4

[] Oznacza pole

Co znaczników i CSS byłoby najlepiej użyć do tego? Wiem, że to będzie łatwe do zrobienia ze stołem Zastanawiam się, czy jest to możliwe z DIV

css checkbox markup

Utwórz 04/08/2009 o 21:49
źródło użytkownik MarcS

W innych językach...

4 odpowiedzi

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

głosy

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>

Odpowiedział 04/08/2009 o 21:53
źródło użytkownik Sean Bright

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

Chciałbym skorzystać z tej znaczników:

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

i te style:

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

Tabele nie są złe, ale są one wykorzystywane do niewłaściwych powodów częściej niż nie. Robią dla większych plików HTML (zły dla wydajności i przepustowości), zwykle z bardziej zaśmiecone HTML strukturze (złe dla konserwacji). Co do danych tabelarycznych Jednakże są one doskonałe.

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

To bardzo semantyczny 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>

I to dość prosty CSS:

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

Dostosować szerokość w miarę potrzeb.

Właściwym sposobem, aby to zrobić naprawdę jest zastąpienie pelementu w moim HTML z legendelementu, ale to nie będzie projektować tak, jak chcesz go bez pewnego dość brzydki CSS.

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

Moim zdaniem jest to bardziej jakiś rodzaj listy niż tabeli (ale nie wymienić cały obraz). Dla mnie to wygląda jak listy definicji więc chciałbym go używać (jeśli nie będę trzymać się nieuporządkowanej listy przykład Magnar rozwiązanie, dodając etykiety.

Wersja lista definicja:

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