Вертикально выровнять флажки динамически - PullRequest
Новая
       17

Вертикально выровнять флажки динамически

0 голосов
/ 09 апреля 2020

У меня есть форма с четырьмя checkboxes, однако может случиться так, что некоторые checkboxes будут скрыты с помощью style="display: none". Какие это, не известно заранее. Это может быть, например, checkbox 3 или checkbox 2 и 3.

Однако это приводит к нежелательному пустому пространству между оставшимися прямоугольниками (как видно из примера кода ниже).

Как я могу убедиться, что оставшиеся прямоугольники хорошо расположены друг над другом; таким образом эффективно устраняя большие пробелы между ними? 

<!DOCTYPE html>
<html>
<body>

<h1>Show Checkboxes</h1>

<form action="/action_page.php">

  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" >
  <label for="vehicle1"> I have a bike</label><br>


  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" >
  <label for="vehicle2"> I have a car</label><br>


  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" style="display: none">
  <label for="vehicle3" style="display: none"> I have a boat</label><br>


  <input type="checkbox" id="vehicle4" name="vehicle4" value="Motor">
  <label for="vehicle4"> I have a motor</label><br><br>

  <input type="submit" value="Submit">
</form>

</body>
</html>

Начинающий с HTML / CSS, пожалуйста, потерпите меня.

Ответы [ 2 ]

2 голосов
/ 09 апреля 2020

Опция 1:

Добавьте style="display:none" к тегу br: 

<h1>Show Checkboxes</h1>

<form action="/action_page.php">

  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label>
  <br>

  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label>
  <br>


  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" style="display: none">
  <label for="vehicle3" style="display: none"> I have a boat</label>
  <br style="display:none">


  <input type="checkbox" id="vehicle4" name="vehicle4" value="Motor">
  <label for="vehicle4"> I have a motor</label>
  <br>
  
  <br>
  <input type="submit" value="Submit">
</form>

Вариант 2:

Поместите каждый тег input и br в теги label и удалите style="display:none" из input тег. Дополнительный бонус: с помощью этого метода вы также можете удалить атрибуты for и id. 

<h1>Show Checkboxes</h1>

<form action="/action_page.php">
  <label>
      <input type="checkbox" name="vehicle1" value="Bike" >
      I have a bike<br>
  </label>

  <label>
      <input type="checkbox" name="vehicle2" value="Car">
      I have a car<br>
  </label>

  <label style="display: none"> 
      <input type="checkbox" name="vehicle3" value="Boat">
      I have a boat<br>
  </label>

  <label>
      <input type="checkbox" name="vehicle4" value="Motor">
      I have a motor<br>
  </label>
  
  <br>
  <input type="submit" value="Submit">
</form>
1 голос
/ 09 апреля 2020

Так же, как вы скрываете свой ввод, а метка скрывает и тег br. 

<!DOCTYPE html>
<html>
<body>

<h1>Show Checkboxes</h1>

<form action="/action_page.php">
 <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" >
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" >
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" style="display: none">
<label for="vehicle3" style="display: none"> I have a boat</label><br style="display: none">
<input type="checkbox" id="vehicle4" name="vehicle4" value="Motor">
<label for="vehicle4"> I have a motor</label><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
...