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

基于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 2

，你可以降低按键的字体大小，使其适合需要的宽度（32PX）里面你已经设置父DIV

并不真正了解这个网站背后的结构你的逻辑，但这里是您的解决方案

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

这是你所需要的？

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

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