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的新手，请多多包涵。
选项1：
Add
style="display:none"to thebrtag as well:选项2：
Place the
inputandbrtags inside eachlabeltags, and removestyle="display:none"from theinputtag. Added bonus: with this method, you can also remove theforand id` attributes.隐藏输入和标签的方式也隐藏br标签。