html - 表格行中同一行的选择框和输入框

Question

我一直试图让一个选择下拉列表与表格行中的输入框保持在同一行，但输入框一直转到下一行。我试图用 display:inline-block 将它们都包装在一个 div 中，但它不起作用。

<table>
  <tr>
      <td>
        <div style="display:inline-block">
          <select id="ajaxtypes">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
          </select>
          <input type="text" name="type" style="width:100%; background-color:#fff000">
        </div>
      </td>
      <td>
         <input type="text" name="type" style="width:100%; background-color:#fff000">
      </td> 
      <td>
         <input type="text" name="type" style="width:100%; background-color:#fff000">
      </td> 
      <td>
         <input type="text" name="type" style="width:100%; background-color:#fff000">
      </td> 
  </tr>
</table>

如果能得到任何帮助，我将不胜感激。

这是一个JSFiddle

Answer 1

使用 <div style="white-space: nowrap"> .或者你甚至可以把那个样式放在 <td> 上.