0

这是我的表单代码：

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

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

在此处输入图像描述

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

在此处输入图像描述

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

4

2 回答 2

1

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

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

将您的样式放入外部文件中。

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

于 2012-10-25T00:49:22.323 回答
0

对于宽度问题，请尝试使用width, 就像在这个 JSFiddle中一样。

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

您的问题position可能源于您使用fixed. 相对定位中的绝对定位可能更像你想要的。

于 2012-10-25T00:21:49.987 回答