用了float后div块之间的上下顺序不对了,该如何处理

用了float后div块之间的上下顺序不对了
先看代码

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上面的足矣。

查看更多 下一篇