Jaký je nejlepší způsob, jak styl seznam zaškrtávacích políček

Question

Jaký je nejlepší způsob, jak styl seznam zaškrtávacích políček

hlasů

21

Co bych chtěl dosáhnout, je rozložení takhle

některé označení [] 1 políčko
            [] Políčko 2
            [] Políčko 3
            [] Políčko 4

[] Představuje políčko

Jaké značkovací a CSS by bylo nejlepší použít pro to? Vím, že to bude snadné co do činění s tabulkou Zajímalo by mě, jestli je to možné s divs

css checkbox markup

Položena 04/08/2009 v 21:49
zdroj uživatelem MarcS

V jiných jazycích...

4 odpovědí

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

hlasů

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>

Odpovězeno 04/08/2009 v 21:53
zdroj uživatelem Sean Bright

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

Chtěl bych použít tuto značku:

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

a tyto styly:

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

Tabulky nejsou zlí, ale jsou zvyklí ze špatných důvodů častěji než ne. Dělají pro větší HTML soubory (špatné pro výkon a šířku pásma), obvykle s více přeplněné html strukturou (špatné pro udržovatelnost). Co se týče tabulky dat, jsou však vynikající.

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

Jedná se o velmi sémantický 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>

A to poměrně jednoduchý CSS:

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

Nastavte šířku podle potřeby.

Správný způsob, jak to udělat, je opravdu nahradit pprvek v mém HTML s legendelementem, ale to nebude stylizovat tak, jak chcete, aniž by některé docela ošklivé CSS.

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

Podle mého názoru jeho více jakási seznamu než tabulky (ale jsi neudal celý obraz). Pro mě to vypadá jako seznam definic, takže bych ji použít (ne-li bych se držet výčtu například Magnar řešení, přidávat popisky.

Verze Seznam definice:

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