Heim > Artikel > Web-Frontend > 用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:301298Durchsuche
先看代码
<div id="formpanel"> <form> <div id="username_field"> <div id="usernamepic"> <img src="images/images/images/username_06.jpg"/ alt="用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose" > </div> <div id="inputfield"> <input type="text" style="max-width:90%" /> </div> </div> <div id="password_field"> <div id="usernamepic"> <img src="images/images/images/images/password_09.jpg"/ alt="用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose" > </div> <div id="inputfield"> <input type="text" style="max-width:90%" /> </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;} 现在出现的问题是我想出现这样的结果
但是却出现了这样的结果
我在password中设置margin-top却不管用，这是为什么？我想在两个input中间空出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"/ alt="用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose" > </div> <div class="inputfield"> <input type="text" style="max-width:90%" /> </div> </div> <div class="field-container"> <div class="usernamepic"> <img src="images/images/images/images/password_09.jpg"/ alt="用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose" > </div> <div class="inputfield"> <input type="text" style="max-width:90%" /> </div> </div> </form> </div></body></html> 最快的方法就是：
#password_field{
float:right;
width:340px;
margin-top:24px;
}
希望对你有帮助，欢迎回访!!
用户名同密码一样的布局为什么还要两个不同层，增加无谓的样式，
-
用户名：
-
密码：
简单东西不要复杂化，html上面的足矣。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何做出这种效果？_html/css_WEB-ITnoseNächster Artikel：checkbox和下拉列表的样式问题_html/css_WEB-ITnose