css 如何改变单选按钮和文本之间的间距?

6tr1vspr  于 2023-02-26  发布在  其他
关注(0)|答案(6)|浏览(245)

我有以下HTML:

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

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

laik7k3q

laik7k3q1#

许多HTML元素都有默认边距设置。您可以覆盖此设置并将其设置为0。在您的示例中,您希望重置单选按钮上的margin-right

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

您可能希望将其添加到样式表中,以便应用于所有单选按钮:

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

2ic8powd2#

您将需要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属性用于辅助功能。

z31licg0

z31licg03#

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

#input-id {
width: auto;
}
hfwmuf9z

hfwmuf9z4#

您可以将以下内容添加到样式表中:

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

siv3szwd5#

首先创建id的内部输入标记(例如id="input1"),然后在css文件中创建样式id(例如#input1{margin-left:5px; margin-top:5px;}),您也可以使用margin-top:5pxmargin-left:5px使用内联样式

w8rqjzmb

w8rqjzmb6#

<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>

这就是你的
将+1(和+2)更改为
<h:outputText value ="+1" style="margin-left: -3px"/>
您必须修改用作标签的文本的样式,为此,您需要它是一个实际的元素,而不仅仅是原始文本。

相关问题