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

您已将宽度：100％放入输入文字。尝试减少它，它会起作用

Answer 2

使用<div style="white-space: nowrap">。或者您甚至可以将该样式放在<td>。

上

Answer 3

bootstrap(AppComponent, [PARENT_PROVIDERS]);设置必须应用于元素本身，而不是其父元素：

display: inline-block

Answer 4

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

下面的代码段

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

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

4 个答案: