选择表格行中同一行的框和输入框答案

【问题标题】：Select Box and Input Box on Same Line in table row选择表格行中同一行的框和输入框
【发布时间】：2016-04-01 18:44:11
【问题描述】：

我一直在尝试让选择下拉菜单与表格行中的输入框保持在同一行，但输入框一直转到下一行。我试图用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

【问题讨论】：

标签： html css

【解决方案1】：

使用<div style="white-space: nowrap">。或者你甚至可以将这种风格放在<td>。

【讨论】：

有效！非常感谢！

【解决方案2】：

您已将 width:100% 放入输入文本。尝试减少它，它会起作用

【讨论】：

你能解释一下缩小宽度的工作原理吗？
只要让它低于 64% 并运行它

【解决方案3】：

display: inline-block 设置必须应用于元素本身，而不是它们的父元素：

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

【讨论】：

哦，我明白了。谢谢约翰内斯

【解决方案4】：

从选择旁边的输入中删除样式width:100%;。

下面的代码sn-p

<td>
          <select id="ajaxtypes">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
          </select>
          <input type="text" name="type" style=" background-color:#fff000">
      </td>

【讨论】：