выровнять флажки без CSS или таблицы?

Question

Если у меня есть HTML-форма, подобная следующей:

<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:       
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>

Можно ли выровнять флажки так, чтобы они были в объединении, без использования таблицы или CSS, но чистого HTML? В противном случае, какой CSS следует использовать?

Answer 1

Да. Обведите каждую метку тегом <label>:

<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">

Затем укажите ширину этикетки:

label {
    display: inline-block; /* try "block" instead if this fails in IE */
    min-width: 5em;
}

Это должно приятно дополнить текстовые поля. В качестве дополнительного бонуса, нажатие на ярлык теперь должно поместить фокус браузера в текстовое поле.

Answer 2

Вы можете просто поместить свои метки и входные данные в неупорядоченный список. Чтобы получить выравнивание, текст должен идти справа от ввода /

<ul>
    <li>
        <label><input /> Some Text</label>
    </li>
</ul>

или

<ul>
    <li>
        <input /><label for="">Some Text</label>
    </li>
</ul>

Rich

Answer 3

В статье Применение CSS к формам есть несколько примеров меток синжирования, чтобы входные данные справа располагались вдоль вертикального края.

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

Answer 4

Самый простой способ - просто расположить их все направо. Я не уверен, работает ли атрибут «align» в элементе формы, но вы можете попробовать это или заключить код в элемент div или p с помощью align="right").

CSS - лучшее решение. Поместите класс в форму, затем используйте правило CSS text-align: right; или просто добавьте style="text-align: right" непосредственно к элементу формы.

Answer 5

Я не понимаю, почему вы хотите это сделать.

Это не соответствует вашей инструкции no css, но вы можете использовать встроенные стили, если вы действительно просто не хотите external css.

Возможно, вы могли бы использовать  

CSS (и в меньшей степени таблицы) - это инструменты, которые вы ищете.

Редактировать : Еще один способ сделать это - изображения с призрачными пикселями. изображения, которые являются альфа-прозрачным png размером 1x1, и вы используете атрибуты высоты и ширины, чтобы указать, сколько места вы хотите разместить. Возможно, вам понадобится встроенный CSS, чтобы все было понятно.