如何在单选按钮之间添加空格？ (HTML)答案

【问题标题】：How do I add space between my radio buttons? (HTML)如何在单选按钮之间添加空格？ (HTML)
【发布时间】：2020-08-30 08:52:35
【问题描述】：

我目前有 3 个性别单选按钮，但它们都彼此太近，我希望一个单选按钮的文本和另一个单选按钮的文本之间有很大的差距。

.radio {
  font-size: 24px;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  color: white;
  position: relative;
  margin-left: 100px;
}

.radio-group {
  color: white;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.radio input[type="radio"] {
  display: none;
  color: white;
  margin: 0 10px 0 10px;
}

.radio span {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid white;
  margin-left: 100px;
}

<label class="label control - label">Gender</label>
<div class="radio-group">
  <label>
       <input type="radio" name="gender" value = "male"/>
       Male
       <span></span>
 </label>
  <label>
       <input type="radio" name="gender" value = "female"/>
       Female
       <span></span>
  </label>
  <label>
       <input type="radio" name="gender" value = "Other"/>
       Other
       <span></span>
  </label>
</div>

我尝试了边距和填充，并查看了其他一些非常相似的堆栈问题，但由于某种原因它们似乎并没有真正起作用，我该怎么办？

【问题讨论】：

您的所有规则都没有使用包装标签作为目标。您是否尝试过这些边距？
什么意思？对不起，我是网络编程的新手，请您详细说明一下..
不太确定你需要什么才能说实话。请注意，您有 .radio 类选择器规则，但 html 中没有此类。对于单选输入元素，您可以使用 input[type=radio] 作为选择器或实际给它们一个类
@charlietfl 噢噢噢！我懂了！问题是，这段代码来自一个 youtube 视频 - 正如我所说的我是初学者，所以我试图掌握一些东西。输入[type = radio] 工作谢谢。你！我也删除了 .radio
可能想学习一些css选择器教程

标签： html css radio-button

【解决方案1】：

那个？（使用 css ::after）

.radio-group {
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.radio-group label::after {
  content:'\00a0\00a0\00a0\00a0'; /* eq &nbsp; x 4 */
}

/* optionnal */
.radio-group label:last-of-type::after {
  content:'';
}

<label class="label control - label">Gender</label>
<div class="radio-group">
  <label>
    <input type="radio" name="gender" value="male">
    Male
  </label>
  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label>
  <label>
    <input type="radio" name="gender" value="Other">
    Other
  </label>
</div>

【讨论】：