Question

我有以下代码，基本上是一个输入表单，因为我现在每个字段的标题和字段之间的间距都在我的浏览器上执行时正确排列但是当我在另一个浏览器上尝试时间距是关闭的，对齐输入的最佳方法是什么，以便它在所有浏览器上呈现相同的效果？

<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" />

由于

Answer 1

这很好地涵盖了它：

http://www.alistapart.com/articles/prettyaccessibleforms

样式无序列表，标签和输入。

Answer 2

只需使用一个表，一列中有标签（标题），另一列中有字段。完成后，您可以轻松地测试不同的风格设置。默认渲染（与左边对齐的字段）不是太糟糕，但考虑右对齐标签;你可能会发现这更好。您不需要任何像素宽度，因为浏览器会自动使每列的宽度与其最宽的单元格内容一样宽。没有其他方法可以做到这一点，除了使用CSS来模拟HTML表格（一种笨拙的方式，在许多仍在使用的IE版本上都不起作用）。

输入格式html格式间距的最佳方法

2 个答案: