2012-03-12 89 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版本上不起作用)之外,没有其他方法可以做到。