2012-03-12 88 views
0

我有下面的代碼,基本上是一個輸入表單,因爲我現在每個字段的標題和字段之間的間距都在我的瀏覽器上執行時正確排列,但是當我在另一個瀏覽器上嘗試它時,有些間距已關閉,對齊輸入的最佳方式是什麼,以便它能在所有瀏覽器上呈現相同的效果?輸入格式html的格式間距的最佳方式

<div style="z-index:12; position:absolute"> 
<font style="color:#FF6600; font-family:pirulen"> 
*Name: <input type="text" name="name" style=" margin-left:70px" size="30px" /><br/> 
*Email: <input type="email" name="email" style="margin-left:70px; margin-top:5px; " size="30px" /><br/> 
Company: <input type="text" name="company" style="margin-left:28px; margin-top:5px" size="30px" /><br/> 
Address: <input type="text" name="address" style="margin-left:30px; margin-top:5px" size="30px" /><br/> 
Address 2: <input type="text" name="address2" style="margin-left:10px; margin-top:5px" size="30px" /><br/> 
City: <input type="text" name="city" style="margin-left:92px; margin-top:5px" size="30px" /><br/> 
State: <input type="text" name="state" style="margin-left:65px; margin-top:5px" size="30px" /><br/> 
Zip: <input type="text" name="zip" style="margin-left:106px; margin-top:5px" size="30px" /><br/> 
*Phone: <input type="text" name="phone" style="margin-left:58px; margin-top:5px" size="30px" /><br/> 
*Comments:<textarea style=" margin-left:12px; margin-top:5px; vertical-align:top; resize:none" name="comments" cols="30" rows="10" draggable="false"></textarea><br/> 
<input type="submit" value="Submit" style="margin-left:150px" /> 

感謝

+3

首先,我會建議不要使用內聯樣式。這是一個維護噩夢(如果你想改變一些東西,你必須每次都在你的標記中追蹤它 - 樣式表是爲了幫助你區分關注點,在這種情況下,標記與風格是相關的,其次,對你的問題更重要,目前還不清楚你想要完成什麼 - 我建議創建一個jsfiddle來展示你已經擁有的東西,然後告訴我們你是如何要這樣做的,這很難將你在這裏的東西翻譯成任何可視化的東西 – kinakuta 2012-03-12 21:34:07

+0

基本上我只需要一個表單,例如名稱:然後輸入字段和電子郵件,公司,地址等相同的想法。我的關注點是名稱和輸入字段之間的間隔,如果我把它放在一邊所有的輸入字段將是在他們各自的標題旁邊,例如姓名將在名稱輸入旁邊,我想要做的是能夠對齊所有輸入,在我的代碼中,我使用邊距但在不同的值/計算機上使用不同的值 – user541597 2012-03-12 21:49:19

+0

如果您希望每一個如我相信你正在尋找對齊,我推薦這樣的:http://jsfiddle.net/LpArB/ – kinakuta 2012-03-12 21:57:29

回答

0

只需使用一張表,一列中的標籤(標題),另一列中的字段。完成之後,您可以輕鬆測試不同的風格設置。默認渲染(字段與左邊對齊)並不算太壞,但考慮右對齊標籤;你可能會發現這更好。您不需要任何像素寬度,因爲瀏覽器會根據其最寬的單元格內容自動使每列的寬度儘可能地寬。除了使用CSS來模擬HTML表格(一種笨拙的方式,這種方式在許多仍在使用的IE版本上不起作用)之外,沒有其他方法可以做到。