如何佈局形式像這樣用CSS也許有些JS？

我有一個內嵌有形式的標籤，文本字段左側的設計。標籤都是不同的寬度。我需要將右側的文本字段右對齊。如何佈局形式像這樣用CSS也許有些JS？

目前該領域的這個樣子。看看右邊如何不對齊？

名稱：_ __ _ __ _ __ _ ___

地址：_ __ _ __ _ __ _ ___

市：_ __ _ __ _ __ _ ___

我需要它看起來像這樣...

名稱：_ __ _ __ _ __ _ __ _ __

地址：_ __ _ __ _ __ _ ___

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

我能做到這一點，而無需設置在每一文本字段固定的寬度？

來源

2012-07-16 Dustin

你可以把它們放在一個容器中，並設置寬度100％。 – Sturm 2012-07-16 17:24:23

你可以發佈你現在的代碼嗎？這對任何試圖給出高質量答案的人都會有所幫助。 – 2012-07-16 17:25:21

授予它可能不是最有效的方法，但你可以做一個單獨的表中的每個領域。

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/

來源

2012-07-16 17:48:36 JSW189

看起來像這樣會工作。謝謝！ – Dustin 2012-07-16 18:41:33

-1

您可以使用無邊界表，例如：Exemple

來源

2012-07-16 17:26:12

文本框的左邊緣不應該對齊，而是從文本之後開始。 – 2012-07-16 17:32:39

我以爲他在談論「輸入文本」，正如他在示例中所展示的那樣。 – 2012-07-16 17:37:21

在這個例子中，輸入文本不是從相同的垂直（x）點開始，它們只能以相同的方式結束。 – 2012-07-16 17:39:16

如何佈局形式像這樣用CSS也許有些JS？

回答

相關問題