优化Radio Box布局：替代CSS硬编码定位的更佳方案

首先纠正你代码里的两个关键问题：

• 两个单选组的name属性不能相同（当前都为Direction），否则两组单选框会互相排斥，选了一组的选项另一组的会被取消，应分别设置为overall-result和risk-evaluation。
• <label>的for属性必须对应<input>的id，你当前的input未设置id，导致点击label无法选中对应单选框，需要给每个input加上匹配的id。

接下来替换硬编码定位的方案，推荐以下几种现代CSS布局方式：

方案1：Flexbox（推荐，最灵活的现代布局） #

Flexbox是目前实现并排布局最常用的方式，无需硬编码数值，自适应能力强。

代码示例： #

<div class="form-container">
  <div class="radio-group">
    <p>Overall Result:</p>
    <input type="radio" name="overall-result" value="north" id="result1">
    <label for="result1">Quality!</label><br>

    <input type="radio" name="overall-result" value="south" id="result2">
    <label for="result2">Excellent!</label><br>

    <input type="radio" name="overall-result" value="east" id="result3">
    <label for="result3">Good!</label><br>

    <input type="radio" name="overall-result" value="west" id="result4">
    <label for="result4">Unsatisfactory</label><br>
    
    <input type="radio" name="overall-result" value="weast" id="result5">
    <label for="result5">Require Improvements</label>
  </div>

  <div class="radio-group">
    <p>Risk Evaluation :</p>
    <input type="radio" name="risk-evaluation" value="north" id="risk1">
    <label for="risk1">Severe</label><br>

    <input type="radio" name="risk-evaluation" value="south" id="risk2">
    <label for="risk2">High</label><br>

    <input type="radio" name="risk-evaluation" value="east" id="risk3">
    <label for="risk3">Medium</label><br>

    <input type="radio" name="risk-evaluation" value="west" id="risk4">
    <label for="risk4">Low</label><br>
    
    <input type="radio" name="risk-evaluation" value="weast" id="risk5">
    <label for="risk5">Insignificant</label>
  </div>
</div>

.form-container {
  display: flex;
  gap: 20px; /* 控制两个容器之间的间距，可按需调整 */
  flex-wrap: wrap; /* 窗口变窄时自动换行，避免溢出 */
}

.radio-group {
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
}

方案2：CSS Grid（适合复杂网格布局扩展） #

如果未来需要扩展成多列布局，Grid会更方便：

代码示例（仅修改CSS）： #

.form-container {
  display: grid;
  grid-template-columns: repeat(2, 300px); /* 两列，每列300px */
  gap: 20px;
  grid-auto-flow: row; /* 自动换行 */
}

.radio-group {
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
}

方案3：Inline-block（兼容旧浏览器） #

如果需要兼容非常老的浏览器（如IE8+），可以用inline-block：

代码示例（仅修改CSS）： #

.form-container {
  font-size: 0; /* 消除inline-block元素间的空白间隙 */
}

.radio-group {
  display: inline-block;
  margin-right: 20px; /* 间距 */
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
  font-size: 16px; /* 恢复字体大小 */
}

这些方案的优势：

• 无需硬编码位置数值，布局自适应，内容或屏幕尺寸变化时不会错乱
• 代码复用性高，两个容器共用一个类即可，减少冗余
• 可维护性强，调整间距或列数只需修改父容器的CSS

内容的提问来源于stack exchange，提问作者Emmanuel Gabriel