Проблема
У меня есть группа переключателей, которые организованы вертикально и расположены друг над другом. Они находятся на отдельных строках с помощью тега ‹br›. Я хочу выровнять их по вертикали с помощью CSS, с выравниванием по левому краю, 100 пикселей слева. Не похоже, чтобы это было так сложно, но я еще не понял этого. Вот иллюстрация, которую я сделал, чтобы прояснить желаемый результат:
Выравнивание по умолчанию:
+----------------------------------------------------------------+
| |
| |
| |
| |
| * choice 1 |
| * choice 2 is a different length |
| * choice 3 is also long |
| |
| |
| |
| |
| |
+----------------------------------------------------------------+
Желаемые переключатели с выравниванием по левому краю и метками справа:
+----------------------------------------------------------------+
| |
| |
| |
| |
| * choice 1 |
| * choice 2 is a different length |
| * choice 3 is also long |
| |
| |
| |
| |
| |
+----------------------------------------------------------------+
Сделано на Asciiflow.com
Код
Вот мой код:
CSS и HTML
form {
background-color: #ffffb3;
font-family: Arial, sans-serif;
padding: 10px;
border: 2px solid #000000;
min-width: 600px;
max-width: 690px;
width: 80%;
margin: 0 auto;
min-height: 200px;
}
label {
margin-left: 100px;
postion: absolute;
}
/*input[type="checkbox"]:checked + */<form method="POST" action="mailto:[email protected]">
<h2>Visitor Survey</h2>
<fieldset>
<label for="myName">Your Name:</label>
<input type="text" name="myName" id="myName">
<br>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
<br>
</fieldset>
<p>What is your favorite movie?</p>
<input type="radio" name="movie" id="transformers" value="Transformers!">
<label for="transformers">Transformers!</label>
<br>
<input type="radio" name="movie" id="dark-knight" value="Dark Knight">
<label for="dark-knight">Dark Knight</label>
<br>
<input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
<label for="goodwillhunting">Good Will Hunting</label>
<br>
<br>
<input type="submit" value="Submit Query">
<input type="reset" value="Reset">
</form>Что я уже пробовал
- Искал в Интернете и Stack Overflow, но результаты не совсем подходили.
- Я пробовал перемещать и кнопку, и метку влево, margin-left: 100px, абсолютное положение, но это не работает.
- Я пробовал возиться с
input[type="radio"] + label(но мне нужно, чтобы ярлык был первым), но безрезультатно. - Оборачивание переключателей и меток в набор полей.
Мои вопросы
Итак, у меня есть несколько вопросов:
- Как сделать это элегантно с помощью CSS без использования блоков div или полей? Или, другими словами, можно ли это сделать с помощью простого CSS, используя только селекторы label и input [type = "radio"]?
- Я понимаю, что наборы полей предназначены для обеспечения доступности, но мне интересно, лучше ли использовать наборы полей или это метод, который устаревает?
- Могу ли я выровнять радиостанции и их метки в отдельные линии по вертикали без использования тега ‹br›?
