无论窗口大小如何，如何在所有浏览器中均等地定位表单元素。

Question

这是我的表单代码：

<td align="center" style=" width=50%; height=50%; background: url(images/side.gif) repeat-x ;">
<img src="images/iphone.gif" width="670" height="549" alt="">
<img style="position:fixed; left:280px; bottom:50px;"src="spr2.png" width="2%" height="15%" alt="">
<form style="display:inline-block;" method="POST" action="index.php">
<label style="position:fixed; left: 200px; bottom: 130px;">: اسم المستخدم</label>
<input style="position:fixed; left:50px; bottom:130px;" type="text" name="username" size="20"><br>
<label style="position:fixed; left:200px; bottom:100px;">: كلمة المرور</label>
<input style="position:fixed; left:50px; bottom:100px;" type="password" name="password" size="20"><br>
<input style="position:fixed; left:50px; bottom:60px;" type="submit" value=" تسجيل دخول ">
</form>
</td>

以下是来自不同浏览器的屏幕截图：

当我调整窗口大小时，元素会改变位置：

如何防止元素改变位置和宽度？

Answer 1

您正在以忽略正常相对定位流的方式在页面上定位元素。通过指定left: 200px;和position:fixed;，无论您的页面大小如何调整，或者滚动到哪里，该元素都将始终距离窗口左侧200px。请注意，即使您的文本框后面有<br>个标记，您仍然可以直接在其右侧显示标签。

使用相对定位 - position:relative;或只删除位置属性。然后使用填充和边距来分隔元素，或浮动它们。如果它们没有水平显示在一行中，请将display属性更改为inline-block，并在标签上使用clear:right;或在<br>之后添加{{1}}。 / p>

将你的风格放在外部文件中。

像这样：http://jsfiddle.net/R7RRH/2/

Answer 2

对于宽度问题，请尝试使用width，例如this JSFiddle。

<input type="text" style="width:200px;" size="20">
<input type="text" style="width:200px;" size="40">​

position的问题可能源于您使用fixed的值。 Absolute positioning内部相对定位可能更像你的目标。