动态垂直对齐复选框

I have a form with four checkboxes, however it could happen that some checkboxes are hidden using style="display: none". Which ones these are, is not known upfront. It could be checkbox 3 for example, or checkbox 2 and 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的新手,请多多包涵。

评论
  • Diers
    Diers 回复

    选项1:

    Add style="display:none" to the br tag as well:

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

    Place the input and br tags inside each label tags, and removestyle="display:none" from the input tag. Added bonus: with this method, you can also remove the for and id` attributes.

    <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>
  • Yves
    Yves 回复

    隐藏输入和标签的方式也隐藏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>