更好的方式定位单选框元素答案

【问题标题】：Better way positioning radiobox elements更好的方式定位单选框元素
【发布时间】：2022-09-26 15:36:25
【问题描述】：

我对 HTML 和 CSS 比较陌生。我正在尝试在网络上构建一个简单的表单。通过在 CSS 中硬编码其位置，我将我的单选框并排放置。我想知道这样做是否比硬编码更好？

   <div class=\"div2\">    
                            <p>Overall Result:</p>
                            <input type=\"radio\"  name=\"Direction\" value=\"north\">
                            <label for=\"direction1\">Quality!</label><br>
                                
                            <input type=\"radio\"  name=\"Direction\" value=\"south\">
                            <label for=\"direction2\">Excellent!</label><br>
                                
                            <input type=\"radio\"  name=\"Direction\" value=\"east\">
                            <label for=\"direction3\">Good!</label><br>
                                
                            <input type=\"radio\"  name=\"Direction\" value=\"west\">
                            <label for=\"direction4\">Unsatisfactory</label>   
                            <br>
                            <input type=\"radio\"  name=\"Direction\" value=\"weast\">
                            <label for=\"direction5\">Require Improvements</label>            
                    </div> 
                     
                    
                    
                    <div class=\"div3\">      
                            <p>Risk Evaluation :</p>
                            <input type=\"radio\"  name=\"Direction\" value=\"north\">
                            <label for=\"direction1\">Severe</label><br>
                                
                            <input type=\"radio\"  name=\"Direction\" value=\"south\">
                            <label for=\"direction2\">High</label><br>
                                
                            <input type=\"radio\"  name=\"Direction\" value=\"east\">
                            <label for=\"direction3\">Medium</label><br>
                                
                            <input type=\"radio\"  name=\"Direction\" value=\"west\">
                            <label for=\"direction4\">Low</label>   
                            <br>
                            <input type=\"radio\"  name=\"Direction\" value=\"weast\">
                            <label for=\"direction5\">Insignificant</label>            
                    </div>

CSS

  .div2{
      border-radius: 1px;
      border-style: dashed;
      border-color: grey;
      background-color: white;
      padding: 10px;
      width: 300px;
    }
    .div3{
      border-radius: 1px;
      border-style: dashed;
      border-color: grey;
      background-color: white;
      padding: 10px;
      width: 300px;
      position:relative;
      left: 320px;
      bottom:184px;
    }

我不确定您正在寻找哪种更好的方法。但是当您添加了php 标记时，我假设您使用的是php 语言，并且在php 中，您可以创建一个数组，其中包含选项value 和name 在键、值对中，然后您可以执行@987654328 @循环并创建您的单选框列表。
你所说的“更好的方法”是什么意思？你想达到什么目的？

标签： php html css

【解决方案1】：

您可以为此使用float: left：

.div2, .div3 {
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
  float: left;
}

<div class="div2">
  <p>Overall Result:</p>
  <input type="radio" name="Direction" value="north">
  <label for="direction1">Quality!</label><br>

  <input type="radio" name="Direction" value="south">
  <label for="direction2">Excellent!</label><br>

  <input type="radio" name="Direction" value="east">
  <label for="direction3">Good!</label><br>

  <input type="radio" name="Direction" value="west">
  <label for="direction4">Unsatisfactory</label>
  <br>
  <input type="radio" name="Direction" value="weast">
  <label for="direction5">Require Improvements</label>
</div>



<div class="div3">
  <p>Risk Evaluation :</p>
  <input type="radio" name="Direction" value="north">
  <label for="direction1">Severe</label><br>

  <input type="radio" name="Direction" value="south">
  <label for="direction2">High</label><br>

  <input type="radio" name="Direction" value="east">
  <label for="direction3">Medium</label><br>

  <input type="radio" name="Direction" value="west">
  <label for="direction4">Low</label>
  <br>
  <input type="radio" name="Direction" value="weast">
  <label for="direction5">Insignificant</label>
</div>

作为替代方案，flexbox 也很好用。但是，您需要一个父元素。

更多关于这里的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: flex;
}
.div2,
.div3 {
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
}

<div class="parent">
  <div class="div2">
    <p>Overall Result:</p>
    <input type="radio" name="Direction" value="north">
    <label for="direction1">Quality!</label><br>

    <input type="radio" name="Direction" value="south">
    <label for="direction2">Excellent!</label><br>

    <input type="radio" name="Direction" value="east">
    <label for="direction3">Good!</label><br>

    <input type="radio" name="Direction" value="west">
    <label for="direction4">Unsatisfactory</label>
    <br>
    <input type="radio" name="Direction" value="weast">
    <label for="direction5">Require Improvements</label>
  </div>



  <div class="div3">
    <p>Risk Evaluation :</p>
    <input type="radio" name="Direction" value="north">
    <label for="direction1">Severe</label><br>

    <input type="radio" name="Direction" value="south">
    <label for="direction2">High</label><br>

    <input type="radio" name="Direction" value="east">
    <label for="direction3">Medium</label><br>

    <input type="radio" name="Direction" value="west">
    <label for="direction4">Low</label>
    <br>
    <input type="radio" name="Direction" value="weast">
    <label for="direction5">Insignificant</label>
  </div>
</div>

【讨论】：

Flexbox 是正确的解决方案，应该放在首位。 float 用于在此处不适用的文本块中浮动元素。因此，这将是不恰当的用法，甚至不应该因为错误的用法而被教授。

【解决方案2】：

创建带有两个 TD 的 HTML 表

<TABLE>
  <TR>
    <TD>1st group of radioboxes</TD>
    <TD>2nd group of radioboxes</TD>
  </TR>
</TABLE>

【讨论】：

它不是表格数据，因此在这里使用的表格是错误的工具