用了float后div块之间的上下顺序不对了,该如何处理
日期：2014-05-17 浏览次数：20898 次
用了float后div块之间的上下顺序不对了
先看代码
现在出现的问题是我想出现这样的结果
但是却出现了这样的结果
我在password中设置margin-top却不管用，这是为什么？我想在两个input中间空出24个像素。
------解决方案--------------------
用户名同密码一样的布局为什么还要两个不同层，增加无谓的样式，
<div class="login"><ul><li><h1>用户名：</h1><h2><input.......></h2></li><li><h1>密码：</h1><h2><input.......></h2></li></ul></div>
简单东西不要复杂化，html上面的足矣。
先看代码
- HTML code
<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>
- CSS code
#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个像素。
------解决方案--------------------
用户名同密码一样的布局为什么还要两个不同层，增加无谓的样式，
<div class="login"><ul><li><h1>用户名：</h1><h2><input.......></h2></li><li><h1>密码：</h1><h2><input.......></h2></li></ul></div>
简单东西不要复杂化，html上面的足矣。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
