Question

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

问题在于，当我设法得到我想要的结果时，第一个单选按钮停止工作。我怎么能阻止它破坏？

.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

＆＃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;

Answer 3

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

Answer 4

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

如何删除HTML中的间距

4 个答案: