如何删除HTML中的间距

Question

我想让这两条线保持在一起。 https://prnt.sc/j6c1ks

期望的结果： https : //prnt.sc/j6c5qb

问题是当我设法获得期望的结果时，第一个单选按钮停止工作。 我如何阻止它破裂？

 .form-label { display: flex; margin-top: 15px; } .label-option { padding: 20px; } 

 <label class="form-label"> <input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken <br> </label> <label class="label-option"> Would you like it spicy? <input type="radio" name="option" value="yes"> Yes <input type="radio" name="option" value="no"> No </label> 

Answer 1

将display:flex更改为display:inline-flex ：

 .form-label { display: inline-flex; margin-top: 15px; } .label-option { padding: 20px; } 

 <label class="form-label"> <input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken <br> </label> <label class="label-option"> Would you like it spicy? <input type="radio" name="option" value="yes"> Yes <input type="radio" name="option" value="no"> No </label> 

Answer 2

 .form-label { display: inline-block; margin-top: 15px; } .label-option { padding: 20px; } 

 <label class="form-label"> <input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken </label> <label class="label-option"> Would you like it spicy? <input type="radio" name="option" value="yes"> Yes <input type="radio" name="option" value="no"> No </label> 

Answer 3

问题是由CSS padding: 20px引起的padding: 20px ，删除此padding: 20px后，您将不再需要<br /> 。

 .form-label { display: flex; margin-top: 15px; } 

 <label class="form-label"> <input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken </label> <label class="label-option"> Would you like it spicy? <input type="radio" name="option" value="yes"> Yes <input type="radio" name="option" value="no"> No </label> 

Answer 4

如果需要删除间距，HTML自动maticllay会删除间距，请保持所有内联元素（例如span bi），否则更改显示值的样式应使用内联覆盖