Heim > Web-Frontend > HTML-Tutorial > 用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose

用了float后div块之间的上下顺序不对了_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:08:30
Original
1309 Leute haben es durchsucht

先看代码

<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>
Nach dem Login kopieren

#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;}
Nach dem Login kopieren

现在出现的问题是我想出现这样的结果
但是却出现了这样的结果

我在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>
Nach dem Login kopieren

最快的方法就是:
#password_field{
float:right;
width:340px;
margin-top:24px;
}

希望对你有帮助,欢迎回访!!

用户名同密码一样的布局为什么还要两个不同层,增加无谓的样式,

  • 用户名:

  • 密码:



简单东西不要复杂化,html上面的足矣。
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage