How to align text input with sorting button inside <td>?

StackOverflow https://stackoverflow.com/questions/18445181

题

I'm having bad time trying to align a clickable element on the right of a text <input> element. It wouldn't be a problem if I would have fixed dimensions, but the <input> will be inside of a container with variable size. The resizing will be made with a js function. I need to place the clickable element on the far right, inside the <td> and, the remaining space to be filled 100% by the <input>. At this moment I'm totally confused and I cannot come with a clean solution that doesn't involve nested tables inside table cell.

At this moment, the clickable is <a> tag, but I'm not even sure if that's the best approach. Need some clear advice right now.

Here is the basic code:

<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>
有帮助吗？

解决方案

Float the clickable element to right, wrap the input by a division and set a margin-right to it:

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top