jquery - 在表格中水平显示单选按钮选项?

标签 jquery html css forms

当前代码:

 <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

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

最佳答案

你想要这样吗?

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>

关于jquery - 在表格中水平显示单选按钮选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45503903/

相关文章:

jquery - 使用 JQuery 隐藏/显示 div 的更简单方法

javascript - 使 div 带有动画飞到另一个 DOM 位置

javascript - 如何启用上下文菜单单击禁用的选择框

jquery - 如何构建一个视差滚动,其中背景图像一旦滚动到并且内容移动

javascript - webpack 样式加载器和 css 加载器不工作

javascript - 隐藏/显示而不刷新,将 onclick 更改为切换

jquery - 用 animate() CSS3 替换 jQuery 幻灯片

jquery - Jquery 是单个库还是一组库?

html - 为特定组件启用滚动

html - Bootstrap 网格列无法正常工作