如何布局形式像这样用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/

Answer 2

您可以使用无边界表，例如：Exemple