在 td 元素中将按钮向右对齐

Question

我有一个带有内容和按钮的<td> 元素。内容的width 应该是除按钮宽度外的所有内容，该宽度将被固定。按钮应与内容的右侧对齐。我怎样才能做到这一点，以下不起作用：

<table border="1px">
  <tr>
    <td>
      <div>
        <div style="width: auto; overflow: auto;">
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="float: right; width: 32px;">
          <button type="button" class="btn btn-primary">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Answer 1

使用 style="float: right;"

<table border="1px">
  <tr>
    <td>
      <div style="display:inline-block">
        <div style="display: inherit;width: calc(100% - 32px);overflow: auto;">
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="float: right; width: 32px;">
          <button type="button" class="btn btn-primary" title="Select Financial Instrument" style="width:100%; word-wrap: break-word;">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Answer 2

这是你需要的吗？

<table border="1px">
  <tr>
    <td>
      <div style="display: flex;">
        <form>
          <textarea></textarea>
        </form>
        <button type="button" class="btn btn-primary" title="Select Financial Instrument">
            Click
        </button>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Answer 3

您可以减小按钮的字体大小，使其适合您为父 div 设置的所需宽度 (32px)

不太了解这个 html 结构背后的逻辑，但这是您的解决方案

<table border="1px">
  <tr>
    <td>
      <div>
        <div style="width:calc(100% - 32px);overflow: auto;float:left">
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="float: right;">
          <button type="button" class="btn btn-primary" style="width:32px;font-size:8px;" title="Select Financial Instrument">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Answer 4

基于Gerard's answer，以下最适合我：

<table border="1px">
  <tr>
    <td>
      <div style="display: inline-flex; align-items: center; width: 100%;">
        <div>
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="padding: 5px;">
          <button type="button">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Answer 5

您可以使用<table> 并将表单放在<td> 中，将按钮放在另一个中。然后您可以修复包含按钮的<td> 的宽度。这将强制第一个<td> 根据<table> 的宽度调整其宽度。

检查此jsFiddle，尝试更改主表的宽度，看看<textarea>（和<td>）如何相应地调整宽度。

更新：

怎么样，不改变你的 HTML 结构：

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }

<table border="1px" style="width: 450px">
  <tr>
    <td>
      <div style="display: table; width: 100%">
        <div style="display: table-row">
          <div style="display: table-cell">
            <span style="display: block; width: 100%">
              <form style="display: block; width: 100%">
                <textarea style="display: block; width: 100%"></textarea>
              </form>
            </span>
          </div><!-- table-cell -->
          <div style="display: table-cell; width: 32px;">
            <button type="button" class="btn btn-primary">
              Click
            </button>
          </div><!-- table-cell -->
        </div><!-- table-row -->
      </div><!-- table -->
    </td>
    <td>Another cell</td>
  </tr>
</table>