如何更改单选按钮与其文本之间的间距？

Question

我有以下HTML：

<input type="radio" name="beds" value="1" />1+
<input type="radio" name="beds" value="2" />2+

如何更改单选按钮和“1+”文本之间的间距？我希望文本更接近到单选按钮，但浏览器在两个元素之间插入一定量的未定义填充。

Answer 1

许多HTML元素都有默认的边距设置。您可以覆盖它并将其设置为0.在您的情况下，您想要重置单选按钮上的margin-right：

<input type="radio" name="beds" value="1" style="margin-right: 0" />1+

您可能希望将其添加到样式表中，以便它适用于所有单选按钮：

input[type="radio"] {
  margin-right: 0;
}

Answer 2

您需要label元素。

<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label>
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label>

然后你可以这样设置：

label {
  margin-left: -3px;
}

另请注意，for属性用于辅助功能。

Answer 3

只需在 css 中将输入 id 的宽度更改为 auto。

#input-id {
width: auto;
}

Answer 4

您可以将其添加到样式表中：

input[type="radio"] {  
  margin-right: 10px;
}

Answer 5

首先创建 id 的内部输入标签（例如 id="input1"），然后在 css 文件中设置样式 id（例如 #input1{margin-left:5px; margin-top:5px;}）您也可以使用 margin-top:5px 和 {{1} 使用内联样式}