用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 12:08:301258검색
先看代码
<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上面的足矣。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.