如何将多个html元素放在TD的同一行中

Question

我有此代码：

<td class='bid-floor-col'>
  <input type='text' class='bid-floor-input' value='foo' />
  <button class='bid-floor-save'>save</button>
</td>

我希望输入和按钮出现在同一行，即输入在左侧，按钮在右侧。我该怎么办？

Answer 1

我实际上只是将您剪切并粘贴到适当的HTML文档中，并且默认情况下可以正常工作。

<table>
  <tr>
    <td class='bid-floor-col'>
      <input type='text' class='bid-floor-input float-left' data-id='<%=ads.id %>' value='<%= display_price_floor(ads) %>' />
      <button class='bid-floor-save float-right' data-id='<%=ads.id %>'>save</button>
    </td>
  </tr>
</table>

预览的屏幕截图。在Chrome中结果相同。

Answer 2

有几种方法，这有两种方法：

1）使用内联屏蔽：

<td class='bid-floor-col'>
  <div style="display: block">
    <input type='text' style="display: inline-block; float: left" class='bid-floor-input' data-id='<%=ads.id %>' value='<%= display_price_floor(ads) %>' />
    <button class='bid-floor-save' style="display: inline-block; float: right" data-id='<%=ads.id %>'>save</button>
  </div>
</td>

参考：
https://www.w3schools.com/css/css_inline-block.asp

2）使用网格模板：

.gridContainer {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
}

<td class='bid-floor-col'>
  <div class='gridContainer'>
    <input type='text' style=" float: left" class='bid-floor-input' data-id='<%=ads.id %>' value='<%= display_price_floor(ads) %>' />
    <button class='bid-floor-save' style=" float: right" data-id='<%=ads.id %>'>save</button>
  </div>
</td>

参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns