html - 如何分隔单选按钮？

我知道这似乎是每个人都应该知道的愚蠢问题。但是我无法为自己的一生解决问题。

我需要实现的外观是：

| ==单选按钮

|恐怖分子在这里均匀隔开|反恐怖分子

我有以下单选按钮：

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{

}

最佳答案

尝试这个。

的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;
}