Не могу контролировать поля радио / чекбокса так, как мне нравится - PullRequest
Новая
       19

Не могу контролировать поля радио / чекбокса так, как мне нравится

0 голосов
/ 17 мая 2018

У меня есть 3 идентификатора - #gender (радио), #frequent (также радио), #player (флажок)

  1. Я хочу сделать интервал между своими входами вмои метки должны быть размером 16px (например)
  2. Я хочу, чтобы мои идентификаторы #frequent и #player состояли из двух строк.

Я пытался передать мой #пол 20% ширины для метки и 80% для ввода (и я играл вокруг него) и ничего.

И #frequent действуют как столбец, хотя я пытался придать ему гибкость-направление: строка;

Это мой Codepen и часть моего кода: для пола, 

<div id="gender">
  <label for="male"> Male  </label>
  <input type="radio" id="male" name="gender" />

  <label for="female"> Female </label>
  <input type="radio" id="female" name="gender" />
</div>

и 

#gender{
  display: flex;
  flex-direction: row;
}
#gender label {
  width: 20%;
}
#gender input[type="radio"]{
  width: 80%;
}

Для частых 

<div id="frequent">
  <legend> How Frequent Do You Listen To Music </legend>
  <label for="aday">All day </label>
  <input type="radio" id="aday" name="frequent"/>

  <label for="eday">Every day</label>
  <input type="radio" id="eday" name="frequent"/>

  <label for="oday">Every other day</label>
  <input type="radio" id="oday" name="frequent"/>

  <label for="party">I'm a party person</label>
  <input type="radio" id="party" name="frequent"/>
</div>

А 

#frequent {
  display: flex;
}
#frequent legend {
  margin-bottom: 24px;
}
#frequent label {
  width: 20%;
}
#frequent input[type="radio"]{
  width: 80%;
}
...