如何删除HTML中的间距

时间:2018-04-17 09:25:28

标签: html css html5 css3

我想让这两行保持在一起。 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>

4 个答案:

答案 0 :(得分:2)

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>

答案 1 :(得分:1)

&#13;
&#13;
.form-label {
  display: inline-block;
  margin-top: 15px;
}

.label-option {
  padding: 20px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

问题是由CSS 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>

答案 3 :(得分:0)

HTML auto maticllay删除间距,如果你需要删除间距保留所有内联元素,如span b i或者更改显示值的样式应该覆盖内联