html - 如何分离单选按钮？

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