在表格中水平显示单选按钮选项？答案

【问题标题】：Display radio button options horizontally in a table?在表格中水平显示单选按钮选项？
【发布时间】：2017-08-04 10:03:35
【问题描述】：

当前代码：

 <tr>
  <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
  Does our applying process live up to your expectations?  <br/>
    <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree" >Strongly Agree<br>
    <input type="radio" class="myCheckbox2" id="0" name="XX" value="Somewhat Agree" >Somewhat Agree <br>
    <input type="radio" class="myCheckbox1" id="0" name="XX" value="Neither Agree nor Disagree" >Neither Agree nor Disagree<br>
    <input type="radio" class="myCheckbox1" id="0" name="XX" value="Somewhat Disagree" >Somewhat Disagree<br>
    <input type="radio" class="myCheckbox1" id="0" name="XX" value="Strongly Disagree" >Strongly Disagree<br>
    <input type="radio" class="myCheckbox2" id="0" name="XX" value="Not Applicable" >Not Applicable <br>
  </td>
 </tr>

这将在垂直列表中显示选项，我真的需要使用内联 css 水平显示它们。

理想情况下应该是这样的：http://imgur.com/a/ns2nD

并且表格中可以列出多个问题，而无需为每个问题指定答案标签。

【问题讨论】：

欢迎来到 SO，您尝试过什么？希望您付出一些努力并向我们展示您的尝试，以便我们提供帮助
嗨，Darren，我尝试使用以下链接中建议的方法，但无法正常工作：stackoverflow.com/questions/32650344/…
将您尝试过的内容添加到问题中 - 这样用户就可以看到您可能出错的地方并解释原因 - 这也可以帮助我们学习！
请检查此链接。 https://stackoverflow.com/questions/31145973/how-to-align-radio-buttons-horizontally-below-labels
Place Radio Button Label Above Using CSS的可能重复

标签： jquery html css forms

【解决方案1】：

你想要这样吗？

div {
  display: inline-block;
  float: left;
  text-align: center;
  width: 50px;
  margin-right: 20px;
}

<tr>
  <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
    Does our applying process live up to your expectations?
    <br/>
    <div>
      <p>Strongly Agree</p>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
    </div>
    <div>
      <p>Strongly Agree</p>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
    </div>
    <div>
      <p>Strongly Agree</p>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
    </div>
    <div>
      <p>Strongly Agree</p>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
    </div>

  </td>
</tr>

【讨论】：

你可以用代替
您好，谢谢！这个解决方案似乎最有效。选项现在是垂直的。你知道吗，我怎样才能以表格的形式添加下面的问题？喜欢：imgur.com/a/OYOoy
@Atheri 您需要为下面的不同问题添加额外的

【解决方案2】：

使用弹性框进行水平对齐。

使每个单选按钮的 id 唯一 (0-5) 并为文本定义标签。

.options {
  display: flex;
  justify-content: space-between;
}

.option {
  display: flex;
  flex-wrap: wrap;
  width: 16%;
}

.option * {
  width: 100%;
}

.option label {
  text-align: center;
  margin-bottom: 0.5em;
}

.option input {
  align-self: flex-end; /* aligns it at the bottom */
}

<tr>
  <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
    Does our applying process live up to your expectations? <br/><br/>
    <div class="options">
      <div class="option">
        <label for="0">Strongly Agree</label>
        <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">
      </div>
      <div class="option">
        <label for="1">Somewhat Agree</label>
        <input type="radio" class="myCheckbox2" id="1" name="XX" value="Somewhat Agree">
      </div>
      <div class="option">
        <label for="2">Neither Agree nor Disagree</label>
        <input type="radio" class="myCheckbox1" id="2" name="XX" value="Neither Agree nor Disagree">
      </div>
      <div class="option">
        <label for="3">Somewhat Disagree</label>
        <input type="radio" class="myCheckbox1" id="3" name="XX" value="Somewhat Disagree">
      </div>
      <div class="option">
        <label for="4">Strongly Disagree</label>
        <input type="radio" class="myCheckbox1" id="4" name="XX" value="Strongly Disagree">
      </div>
      <div class="option">
        <label for="5">Not Applicable</label>
        <input type="radio" class="myCheckbox2" id="5" name="XX" value="Not Applicable">
      </div>
    </div>
  </td>
</tr>

【讨论】：

【解决方案3】：

为什么要在行尾添加<br> ..？试试这个

<label>Strongly Agree<br><input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree"></label>

或只需删除<br>

<input type="radio" class="myCheckbox2" id="0" name="XX" value="Somewhat Agree" >Somewhat Agree

【讨论】：

【解决方案4】：

删除所有<br>并在<td></td>之间写入input

<table>
  <tr>
    <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">

      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree">Strongly Agree
    </td>
    <td>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Somewhat Agree">Somewhat Agree
    </td>
    <td>
      <input type="radio" class="myCheckbox1" id="0" name="XX" value="Neither Agree nor Disagree">Neither Agree nor Disagree</td>
    <td>
      <input type="radio" class="myCheckbox1" id="0" name="XX" value="Somewhat Disagree">Somewhat Disagree
    </td>
    <td><input type="radio" class="myCheckbox1" id="0" name="XX" value="Strongly Disagree">Strongly Disagree</td>
    <td>
      <input type="radio" class="myCheckbox2" id="0" name="XX" value="Not Applicable">Not Applicable
    </td>
  </tr>
</table>

【讨论】：

【解决方案5】：

这是实现所有单选按钮水平的最简单方法，但最好使用文本标签及其 for 属性以获得更好的结果。

<tr>
    <td style="font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
        Does our applying process live up to your expectations?  <br/>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox2" id="0" name="XX" value="Strongly Agree" >Strongly Agree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox2" id="0" name="XX" value="Somewhat Agree" >Somewhat Agree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox1" id="0" name="XX" value="Neither Agree nor Disagree" >Neither Agree nor Disagree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox1" id="0" name="XX" value="Somewhat Disagree" >Somewhat Disagree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox1" id="0" name="XX" value="Strongly Disagree" >Strongly Disagree
            </div>
            <div style="display:inline-block">
              <input type="radio" class="myCheckbox2" id="0" name="XX" value="Not Applicable" >Not Applicable
            </div>
      </td>
</tr>

【讨论】：