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

幅の問題については、このJSFiddlewidthのようにを利用してみてください。

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

の問題はposition、の値を使用していることに起因している可能性がありますfixed。相対ポジショニング内の絶対ポジショニングは、あなたが目指しているものに似ているかもしれません。

于 2012-10-25T00:21:49.987 に答える