Question

如何将单选按钮靠近标签？

input[type="radio"]{
   float: left;
   width: auto;
   margin-left: 3em;
}

<fieldset id="payment_method">
<legend>Payment Method</legend>
<input type="radio" name="payment_method"value="Bill Me">
<label for= "payment1"> Bill Me</label>
<input type="radio" name="payment_method"value="Bill Me">
<label for= "payment2">Credit Card</label>
</fieldset>

Answer 1

你不需要浮动你的输入，你可以给标签一个负余量，如下所示：

label {
margin-left: -1px;
}

Answer 2

不要将任何规则应用于您的无线电输入。由于所有表单元素都是非块级元素（不包括form本身），因此您不需要float它们（在您的情况下）并删除额外的margin。请参阅fiddle

input[type="radio"] {
    /* No styling */
}

Answer 3

我喜欢在<div>中包装输入/标签对，以便更轻松地进行样式设置。之后，您可以删除标签和输入标签之间的换行符：

<fieldset id="payment_method">
  <legend>Payment Method</legend>
  <div class="fieldgroup">
    <input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">Bill Me</label>
  </div><!--/.fieldgroup-->
  <div class="fieldgroup">
    <input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit Card</label>
  </div><!--/.fieldgroup-->
</fieldset>

它并不是非常漂亮，但它是最兼容浏览器的解决方案，因为每个浏览器都会以不同的方式处理内联块间距。

或者，如果你想保持你的代码整洁，你可以使用像你原来尝试的浮动：

CodePen

input[type='radio'],
label {
  float: left;
}
.fieldgroup:after {
  content: "";
  display: block;
  clear: both;
}

单选按钮对齐问题

3 个答案: