Question

我在尝试对齐文本<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>

Answer 1

将可点击的元素向右浮动，将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

如何将文本输入与排序按钮对齐？

1 个答案: