Jquery 是否在表格中水平显示单选按钮选项？

当前代码：

 <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水平显示它们

理想情况下，它将如下所示：

---

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

为什么要在行尾添加

？ 试试这个

强烈同意

或 只需删除

---

有些同意

为什么要在行末添加

？ 试试这个

强烈同意

或 只需删除

有点同意

你想这样吗

div{
显示：内联块；
浮动：左；
文本对齐：居中；
宽度：50px；
右边距：20px；
}

我们的申请流程是否符合您的期望？


强烈同意

强烈同意

强烈同意

强烈同意

你想要这样吗

div{
显示：内联块；
浮动：左；
文本对齐：居中；
宽度：50px；
右边距：20px；
}

我们的申请流程是否符合您的期望？


强烈同意

强烈同意

强烈同意

强烈同意

删除所有

并在

强烈同意
有点同意
中立
有点不同意
强烈反对
不适用

删除所有

并在

强烈同意
有点同意
中立
有点不同意
强烈反对
不适用

使用FlexBox进行水平对齐

使每个单选按钮的id唯一（0-5），并为文本定义标签

。选项{
显示器：flex；
证明内容：之间的空间；
}
.选择权{
显示器：flex；
柔性包装：包装；
宽度：16%；
}
.选项*{
宽度：100%；
}
.选项标签{
文本对齐：居中；
边缘底部：0.5em；
}
.选项输入{
自对齐：柔性端；/*在底部对齐*/
}

我们的申请流程是否符合您的期望


强烈同意
有点同意
中立
有点不同意
强烈反对
不适用

使用FlexBox进行水平对齐

使每个单选按钮的id唯一（0-5），并为文本定义标签

。选项{
显示器：flex；
证明内容：之间的空间；
}
.选择权{
显示器：flex；
柔性包装：包装；
宽度：16%；
}
.选项*{
宽度：100%；
}
.选项标签{
文本对齐：居中；
边缘底部：0.5em；
}
.选项输入{
自对齐：柔性端；/*在底部对齐*/
}

我们的申请流程是否符合您的期望


强烈同意
有点同意
中立
有点不同意
强烈反对
不适用

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

<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>

我们的申请流程是否符合您的期望

强烈同意
有点同意
中立
有点不同意
强烈反对
不适用

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

<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>

我们的申请流程是否符合您的期望

强烈同意
有点同意
中立
有点不同意
强烈反对
不适用

欢迎来到SO，您尝试了什么？希望你能表现出一些努力，并向我们展示你所做的尝试，以便我们能够帮助Hi Darren，我尝试了以下链接中建议的方法，但无法使其工作：将您尝试过的内容添加到问题中-这样用户可以看到您可能出错的地方并解释原因-这也可以帮助我们学习！请检查这个链接。可能是重复的欢迎，所以，你尝试了什么？希望您能做出一些努力，并向我们展示您所做的尝试，以便我们能够帮助Hi Darren，我尝试了以下链接中建议的方法，但未能使其发挥作用：