0

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

目前，可点击是<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>
4

1 回答 1

2

将可点击元素浮动到右侧，input用除法包装 a 并将其设置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 演示

于 2013-08-26T13:33:33.033 回答