如何将页面中并排的radio单选按钮居中并调整左侧按钮位置

问题原因 #

• HTML结构不规范：<div class="choice" 缺少闭合符号>，且<tr>表格行元素必须嵌套在<table>标签内使用，直接放在div中会导致浏览器解析异常，样式无法正常生效。
• 所有单选按钮共用同一套margin规则：你当前给所有input[type="radio"]统一设置了margin: 40px 10px 100px 100px（四个值对应上、右、下、左四个方向的边距），两个单选按钮都被加了100px的左外边距，自然无法单独调整左侧按钮的水平位置。

修改后的代码 #

HTML代码 #

<div class="choice">
  <table>
    <tr>
      <td><input type="radio" name="dreg" class="first-radio">I want to post my event</td>    
      <td><input type="radio" name="dreg">I want to attend an event</td>
    </tr>
  </table>
</div>

注：给第一个单选按钮新增了first-radio类名，用于单独控制样式。

CSS代码 #

.choice {
  text-align: center;
  padding: 16px 100px;
  font-size: 150%;
  /* 新增：让表格整体居中，实现单选组整体居中 */
  display: flex;
  justify-content: center;
}

input[type="radio"]{
  margin: 40px 10px 100px 0;
  cursor: pointer;
}

/* 单独控制左侧第一个单选按钮的左边距 */
.first-radio {
  /* 需要往左移就调小这个值，设为负数即可超出单元格向左偏移，比如margin-left: -20px就是往左移20px */
  margin-left: 100px;
}

内容的提问来源于stack exchange，提问作者bola Oyetade