Question

所以我在my entrepreneur business opportunity rating matrix遇到了问题：我希望单选按钮保持在同一条线上。问题是我不知道应该如何处理，因为如果我为单元格给出一个固定的最小宽度，我不确定它是否会在其他浏览器上正确显示，如果单元格很大，我会松开对齐单选按钮。

你们有一个CSS / Javascript（jQuery）技巧可以解决这个问题吗？

谢谢

Answer 1

这很简单：只需将white-space: nowrap;添加到您的td。

Answer 2

我会重新设计表格布局（注意这是一个快速而又简单的解决方案），将按钮放在标签下方（以较小的窗口尺寸节省空间）。

<tr class="even">
  <td rowspan="2">Customer atlernatives</td>
  <td class="col_g left-aligned">A lot</td>
  <td class="col_d right-aligned">Few</td>
</tr>
<tr class="even">
  <td class="col_m centered">
    <form method="post" action="action" class="bz_op_val">
      <input type="radio" value="4" name="38">
      <input type="radio" value="3" name="38">
      <input type="radio" value="2" name="38">
      <input type="radio" value="1" name="38">
      <input type="radio" value="0" name="38">
    </form>
  </td>
</tr>

对我来说，一个更好的解决方案应该是：

<tr class="even">
  <td>Customer atlernatives</td>
  <td>
    <div class="col_g left-aligned">A lot</div>
    <div class="col_d right-aligned">Few</div>
    <form method="post" action="action" class="bz_op_val cleared-both-centered">
      <input type="radio" value="4" name="38">
      <input type="radio" value="3" name="38">
      <input type="radio" value="2" name="38">
      <input type="radio" value="1" name="38">
      <input type="radio" value="0" name="38">
    </form>
  </td>
</tr>

表的一列需要保持一行（HTML / CSS / Javascript）

2 个答案: