Что такое лучший способ стилизации список флажков

Question

Что такое лучший способ стилизации список флажков

голоса

21

То, что я хотел бы достичь, это расположение, как это

некоторые метка [] Флажок 1
            [] Флажок 2
            [] Флажок 3
            [] Флажок 4

[] Представляет собой флажок

Что разметки и CSS бы лучше использовать для этого? Я знаю, что это будет легко сделать с помощью таблицы я интересно, если это возможно с дивой

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>

И это довольно простой CSS:

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

Регулировка ширины по мере необходимости.

Правильный способ сделать это на самом деле , чтобы заменить pэлемент в моем HTML сlegend элементом, но это не стиль, как вы хотите его без какого - то довольно уродливого CSS.

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

На мой взгляд , его еще какой - то из списка , чем за столом (но Вы не перечисляют всю картину). Для меня это выглядит как список определений , так что я хотел бы использовать его (если не я бы придерживаться неупорядоченным примера списка на Магнар решение, добавив метки.

Версия списка определений:

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