如何将文本输入与 <td> 内的排序按钮对齐？答案

【问题标题】：How to align text input with sorting button inside <td>?如何将文本输入与 <td> 内的排序按钮对齐？
【发布时间】：2013-08-26 13:21:14
【问题描述】：

我在尝试将可点击元素对齐到文本 <input> 元素的右侧时遇到了麻烦。如果我有固定的尺寸，那将不是问题，但<input> 将在一个可变大小的容器内。调整大小将使用 js 函数进行。我需要将可点击元素放在最右边，<td> 内，剩余空间将由<input> 填充 100%。此刻我完全糊涂了，我无法提供一个不涉及表格单元格内嵌套表格的干净解决方案。

此时，可点击的是<a> 标签，但我什至不确定这是否是最好的方法。现在需要一些明确的建议。

这是基本代码：

<html>
    <head>
        <style type="text/css">
            table{border-collapse:collapse;}

            td{
                border: 1px solid black;
                padding: 2px;
            }

            .container{
                width: 100px;/*this will be dinamically resized with JS*/
            }

            input[type="text"]{
                width: 100%;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <td>
                        <div class="container">
                            <input type="text"><a href="#" onclick="/*call myFunc*/" >&#9650;</a>
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        data1
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

【问题讨论】：

标签： html html-table alignment textinput

【解决方案1】：

将 clickable 元素浮动到右侧，将input 用除法包裹起来，并为其设置margin-right：

CSS：

input[type="text"] { width: 100%; }
.wrapper { margin-right: 25px; }
.clickable { float: right; }

HTML：

<a class="clickable" href="#" onclick="/*call myFunc*/" >&#9650;</a>
<div class="wrapper">
    <input type="text">
</div>

JSBin Demo

【讨论】：