Maison > Article > interface Web > 用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:08:301298parcourir
先看代码
<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上面的足矣。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：如何做出这种效果？_html/css_WEB-ITnoseArticle suivant：checkbox和下拉列表的样式问题_html/css_WEB-ITnose