html - CSSとおそらくいくつかのJSでこのようなフォームをレイアウトする方法は？

Question

テキストフィールドの左側にフォームラベルがインラインで表示されているデザインがあります。ラベルはすべて異なる幅です。テキストフィールドの右端を右揃えにする必要があります。

現在、フィールドは次のようになっています。右端がどのように位置合わせされていないかを確認しますか？

名前：_ __ _ __ _ __ _ ___

住所：_ __ _ __ _ __ _ ___

市：_ __ _ __ _ __ _ ___

このように見えるようにする必要があります...

名前：_ __ _ __ _ __ _ __ _ __

住所：_ __ _ __ _ __ _ ___

市：_ __ _ __ _ __ _ __ _ ____

各テキストフィールドに固定幅を設定せずにこれを行うことはできますか？

Answer 1

確かに、これはおそらく最も効率的なアプローチではありませんが、フィールドごとに個別のテーブルを作成することはできます。

HTML

<table>
    <tr>
        <th>Name:</th>
        <td><input type="text"></td>
    </tr>
</table>

<table>
    <tr>
        <th>Address:</th>
        <td><input type="text"></td>
    </tr>
</table>

<table>
    <tr>
        <th>City:</th>
        <td><input type="text"></td>
    </tr>
</table>

CSS

table { width: 300px; }
td { border-bottom: 1px solid black; }
th { width: 1em; }

input { width: 100%; border: none; }
input:focus { outline: none; }

JSフィドル： http： //jsfiddle.net/BUy6f/2/ </ p>

Answer 2

次のように、ボーダレステーブルを使用できます。