动态垂直对齐复选框

Question

我有一个包含四个 checkboxes 的表单，但是有可能使用 style="display: none" 隐藏了一些 checkboxes。这些是哪些，事先并不知道。例如，它可以是 checkbox 3，或者 checkbox 2 和 3。

但是，这会导致剩余框之间出现不需要的白色 space（如下面的代码示例所示）。

我怎样才能确保剩余的框在彼此下方很好地对齐？从而有效地消除了它们之间的白色 space?

的大间隙

<!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，请多多包涵

Answer 1

选项 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 标签内，并从 input 标签中删除 style="display:none"。额外奖励：使用此方法，您还可以删除 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>

Answer 2

与隐藏输入和标签的方式相同，也可以隐藏 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>

动态垂直对齐复选框

Vertically align checkboxes dynamically

html

css

forms

vertical-alignment

选项 1：

选项 2：