Hva er den beste måten å style en liste over boksene

Question

Hva er den beste måten å style en liste over boksene

stemmer

21

Det jeg ønsker å oppnå er et oppsett som dette

noen etikett [] aktiveres ett
            [] Aktiveres 2
            [] Aktiveres 3
            [] Aktiveres 4

[] Representerer en avkrysnings

Hva markup og CSS ville være best å bruke til dette? Jeg vet at dette ville være lett å gjøre med et bord jeg lurer på om dette er mulig med divs

css checkbox markup

Publisert på 04/08/2009 klokken 20:49
kilden bruker MarcS

På andre språk...

4 svar

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

stemmer

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>

Svarte 04/08/2009 kl. 20:53
kilden bruker Sean Bright

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

Jeg vil bruke denne markup:

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

og disse stilene:

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

Tabeller er ikke onde, men de er vant til feil årsaker oftere enn ikke. De gjør for større html-filer (dårlig for ytelse og båndbredde), vanligvis med en mer rotete html-struktur (dårlig for vedlikehold). Som for tabelldata men de er gode.

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

Denne svært semantisk 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>

Og denne ganske enkel CSS:

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

Juster bredder etter behov.

Den riktige måten å gjøre dette virkelig er å erstatte pelement i min HTML med et legendelement, men dette vil ikke style den slik du vil ha det til uten noen ganske stygge CSS.

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

Etter min mening det er mer en slags liste enn en tabell (men du ikke har oversikt over hele bildet). For meg ser det ut som en definisjon liste så jeg vil bruke det (hvis ikke jeg ville holde seg til en uordnet liste eksempel Magnar løsning, og legger til etiketter.

Definisjonen liste versjonen:

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