Выровняйте по левому краю метку переключателя по вертикали на отдельных строках только с помощью CSS

Question

Проблема

У меня есть группа радио кнопок, которые расположены вертикально, сложены. Они находятся на отдельных строках с помощью тега
. Я хочу выровнять их по вертикали, используя 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                                 |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
+----------------------------------------------------------------+

Сделано с http://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:[e-mail]">

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

Что я уже пробовал

• Поиск в Интернете и переполнение стека, но результаты не совсем применимы.
• Я попытался переместить кнопку и метку влево, поле слева: 100px, абсолютная позиция, но это не работает.
• Я пытался возиться с input[type="radio"] + label (но мне нужен ярлык на первом месте), но безрезультатно.
• Оборачивание переключателей и меток в fieldset.

Мои вопросы

Итак, у меня есть несколько вопросов:

1. Как сделать это элегантно с помощью CSS без использования divs или fieldsets? Или, другими словами, может ли это быть сделано с простым CSS с помощью только селектора метки и input[type="radio"]?
2. Я понимаю, что наборы полей предназначены для обеспечения доступности, но мне интересно, лучше ли использовать наборы полей или это устаревшая техника?
3. Могу ли я выровнять радиостанции и их метки в отдельных строках по вертикали, не используя тег
   ?

Answer 1

Что-то вроде этого?

1. Стек radio кнопка и label комбо с использованием псевдоэлементов (:after в этом случае). Нет необходимости <br>,
2. Применять margin-left в input[type="radio"] вместо label,

С помощью :after Я создал пустой блок (display: block;). Этот пустой блок находится в конце label поэтому он перемещает следующий элемент в новую строку.

Замечания:

Для объяснения я выделил пустой блок (созданный :after) с красной каймой. Удалить при необходимости.

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;
}
input[type="radio"] {
  margin-left: 100px;
}
input[type="radio"] + label {
  margin-left: 10px;
}
input[type="radio"] + label:after {
  content: '';
  display: block;
  /* Below code(border: 1px solid red;) is just for illustration, remove if necessary */
  border: 1px solid red;
}
/*input[type="checkbox"]:checked + */

<form method="POST" action="mailto:[e-mail]">

  <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>
  <input type="radio" name="movie" id="dark-knight" value="Dark Knight">
  <label for="dark-knight">Dark Knight</label>
  <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>

Answer 2

Во-первых, вы должны заключить группы форм в div.
Я знаю, что вы сказали не использовать их, но это самый элегантный и простой способ. Пойти любым другим путем просто не так хорошо.

Это позволит вам избавиться от br потому что, естественно, div определяется как display: block в CSS, что означает, что это будет на отдельных строках.

Чтобы сделать то, что вы хотите, вы должны просто выровнять эти div влево и добавить 100px padding-left каждому див.

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