ホームページ > 記事 > ウェブフロントエンド > float を使用した後、div ブロック間の上下の順序が間違っています_html/css_WEB-ITnose
float を使用した後、div ブロック間の上下の順序が間違っています_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:08:301298ブラウズ
まずコードを見てみましょう
<div id="formpanel"> <form> <div id="username_field"> <div id="usernamepic"> <img src="images/images/images/username_06.jpg"/> </div> <div id="inputfield"> <input type="text" style="width:227px; height:22px; border-color:b9b9b9" /> </div> </div> <div id="password_field"> <div id="usernamepic"> <img src="images/images/images/images/password_09.jpg"/> </div> <div id="inputfield"> <input type="text" style="width:227px; height:22px; border-color:b9b9b9" /> </div> </div> </form> </div>
#formpanel{ width:341px; height:135px; margin-left:auto; margin-right:auto; }#username_field{ margin-top:0px; width:340px; }#usernamepic{ float:left; margin-top:0px; margin-left:0px;}#inputfield{ float:right; margin-top:0px; margin-right:0px; width:228px; height:27px;}#password_field{ width:340px;} 今の問題は、そのような結果が欲しいということです
しかし、そのような結果が得られます
パスワードに margin-top を設定しましたが、これはなぜ機能しません。 ? 2 つの入力間に 24 ピクセルを空けておきたいと思います。
ディスカッションに返信 (解決策)
#password_field{
margin-top:10px;
width:340px
}
<html><head> <title></title> <style type="text/css">#formpanel{ width:341px; height:135px; margin-left:auto; margin-right:auto; }.field-container{ margin-top:0px; width:340px; position: relative;}.usernamepic{ position: absolute; margin-top:0px; margin-left:0px;}.inputfield{ margin-top:0px; margin-right:0px; width:228px; height:27px;}.inputfield input{padding-left: 24px;} </style></head><body><div id="formpanel"> <form> <div class="field-container"> <div class="usernamepic"> <img src="images/images/images/username_06.jpg"/> </div> <div class="inputfield"> <input type="text" style="width:227px; height:22px; border-color:#b9b9b9" /> </div> </div> <div class="field-container"> <div class="usernamepic"> <img src="images/images/images/images/password_09.jpg"/> </div> <div class="inputfield"> <input type="text" style="width:227px; height:22px; border-color:#b9b9b9" /> </div> </div> </form> </div></body></html> 最も早い方法は次のとおりです:
#password_field{
フロート:右
width:340px;
margin-top:24px;
}
お役に立てば幸いです、またお越しください
b94e4bb120d6a012acf19630419362c6ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c64a249f0d628e2318394fd9b75b4636b1ユーザー名:473f0a7621bec819994bb5020d29372ac1a436a314ed609750bd7c7d319db4dac5f07f931ba48cdd4c71e1f32916364d4369006a5bd3397a8e7ee652c3063ffb25edfb22a4f469ecb59f1190150159c64a249f0d628e2318394fd9b75b4636b1パスワード:473f0a7621bec819994bb5020d29372ac1a436a314ed609750bd7c7d319db4dae2f84b2e48cd305a8dfa682ec4d16c2a2e9b454fa8428549ca2e64dfac4625cdbed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689325b94d06936b1d0ee2339101c5bc027
単純なことを複雑にしないでください。HTML で十分です。