То, что я хотел бы получить, это макет, подобный этому
some label [ ] checkbox 1
[ ] checkbox 2
[ ] checkbox 3
[ ] checkbox 4
[] представляет флажок
Какую разметку и CSS лучше всего использовать для этого? Я знаю, что это будет легко сделать с таблицей Мне интересно, возможно ли это с divs
Я бы использовал эту разметку:
<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-структурой (плохой для ремонтопригодности). Однако для табличных данных они превосходны.
Этот очень семантический 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.
<div style="float: left;">
some label
</div>
<div style="float: left;">
<input type="checkbox" /> checkbox 1<br />
<input type="checkbox" /> checkbox 2<br />
<input type="checkbox" /> checkbox 3<br />
<input type="checkbox" /> checkbox 4
</div>
По моему мнению, это скорее какой-то список, чем таблица (но вы не указали всю картину). Для меня это выглядит как список определений, поэтому я бы использовал его (если бы я не придерживался примера неупорядоченного списка 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>