Html 如何确定单选按钮的宽度

我想风格与纯css单选按钮。我几乎得到了它，但是我不能用固定的宽度来制作背景色

这就是我正在实现的

…这就是我想要实现的目标：

这是我的html

<form>

<a>
<input id="radio1" type="radio" name="mode" value="size" class="button"> 
<span><label for="radio1">Varones</label></span>
</a>

<a>     
<input id="radio2" type="radio" name="mode" value="count" checked> 
<span><label for="radio2">Mujeres</label></span>
</a>

<a>
<input id="radio3" type="radio" name="mode" value="count" checked>
<span><label for="radio3"> Ambos</label></span>
</a>

</form>

这是一个例子

---

提前感谢。

您需要将

显示：内联块

添加到跨度中，并从选中的选项中删除填充：

span{
    display: inline-block;
    width: 80px;
}

---

@Pablo很乐意帮忙。不要忘记点击左边的绿色复选标记，将其标记为您接受的答案。最好在

em

中指定宽度，而不是

px

，这样，如果用户在浏览器中指定了自定义字体设置，标签文本就不会被切断。

span{
    display: inline-block;
    width: 80px;
}