在 td 元素中将按钮对齐到右侧

Question

在 td 元素中将按钮对齐到右侧

5

我有一个包含内容和按钮的<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>

- Roland

这个回答解决了你的问题吗？将按钮在td元素中对齐到右侧 - Michael Freidgeim

5个回答

3

根据Gerard的回答，以下对我最为有效：

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

- Roland

2

您可以减小按钮的字体大小，使其适应您设置给父级div的所需宽度（32像素）。

我不太理解您在这个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>

- Mihai T

不起作用，你的代码把按钮放在输入框下面，我想要它在右边。 - Roland

哦，我理解问题不正确。我以为溢出是问题所在。使用 calc() 计算左侧 div 的宽度，width:calc(100% - 32px)，并添加 float left。我改变了我的答案，虽然现在有点晚了 :) - Mihai T

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>

- Gerard

1

您可以使用<table>，将表单放置在一个<td>中，将按钮放置在另一个<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>

- Hemant Kumar

这是可能的，但我想避免这种解决方案，因为该按钮在语义上属于特定的表元素。 - Roland

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Himanshu Bansal · Accepted Answer

请使用样式属性 "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>