我想让这两行保持在一起。 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>
答案 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)
.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;
答案 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或者更改显示值的样式应该覆盖内联