Как выровнять флажки и текст по вертикали? - PullRequest
Новая
       34

Как выровнять флажки и текст по вертикали?

1 голос
/ 26 мая 2020

Я хочу, чтобы флажки были параллельны друг другу, а текст выравнивался одинаково. Вот что у меня есть (я новичок в этом): `

<input type="checkbox"
          name=”liste1”
          value="1">This is Example1<br>
        <input type="checkbox"
          name=”liste1”
          value="2">Example2<br>
        <input type="checkbox"
          name=”liste1”
          value="3">Example123456<br>
        <input type="checkbox"
          name=”liste1”`enter code here`
          value="4">Option4<br>`

Вот как это выглядит

1 Ответ

1 голос
/ 26 мая 2020

Для начала мы исправим исходную версию кода:

  • ” не является допустимой цитатой для использования в HTML, вы должны использовать либо ", либо '
  • Если тег HTML не имеет закрывающего тега (например, <p>content</p>), то он называется самозакрывающимся и должен иметь sla sh перед закрывающим углом. скобка, например: <input />

Это дает нам: 

<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />

Этого достаточно, чтобы он выглядел правильно, однако, как правило, если вы хотите отображать текст рядом с флажком, вы хотите, чтобы он был интерактивным и влиял на флажок. Самый простой способ сделать это - обернуть ввод и его текст метки внутри элемента <label>, например: 

label {
  display: block;
}
<label>
  <input type="checkbox" name="liste1" value="1" />
  This is Example1
</label>
<label>
  <input type="checkbox" name="liste1" value="2" />
  Example2
</label>
<label>
  <input type="checkbox" name="liste1" value="3" />
  Example123456
</label>
<label>
  <input type="checkbox" name="liste1" value="4" />
  Option4
</label>

(я также использовал маленькое правило CSS вместо тега <br />, так как обычно для макета лучше использовать CSS)

...