Question

我知道这似乎是一个每个人都应该知道的愚蠢问题。但我无法为我的生活做出努力。

我需要实现的目标是：

| ==单选按钮

|恐怖分子在这里间距很好 |反恐怖主义者

我有这些单选按钮：

Image

但我需要的是让他们在停留在页面的死角时保持相等的距离。

我和他们搞砸了好几年都无济于事。

HTML：

   <input type='radio' id='choice' value='terrorist' class='radiopick'>Terrorist's
   <input type='radio' id='choice' value='countert' class='radiopick'>Counter-Terrorist's

CSS：

input.radiopick{

}

Answer 1

试试这个。

<强> HTML

<form>
<div class="radiopick">
    <input type='radio' id='choice' value='terrorist' />Terrorist's</div>
<div class="radiopick">
    <input type='radio' id='choice' value='countert' />Counter-Terrorist's</div>
</form>

<强> CSS

form {
display:flex;
text-align:center;
}
form .radiopick {
justify-content: center;
width:150px;
margin: auto;
}

Answer 2

你想过用桌子吗？虽然我不完全理解这个问题，但如果你想要每个盒子的间距均匀，你可以做类似的事情：

<!DOCTYPE html>
<html>
<body>

<table style="width:300px" align="center">
<tr>
  <td><input class="radiopick" type="radio" name="test" value="yes" />Terrorist</td>
  <td><input class="radiopick" type="radio" name="test" value="yes" />Counter-Terrorist</td>        
</tr>
</table>

</body>
</html>

可以找到一个例子here

如何分开单选按钮？

2 个答案: