0

クリック可能な要素をテキスト要素の右側に揃えようとしてうまくいきません<input>。サイズが固定されていても問題ありませんが、<input>サイズが可変のコンテナー内になります。リサイズはjs関数で行います。クリック可能な要素を右端の and 内に配置する必要があり<td>、残りのスペースは<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させ、区切りでラップし、それに amargin-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 に答える