Maison >interface Web >tutoriel HTML >新手div的嵌套不会排列整齐_html/css_WEB-ITnose
新手div的嵌套不会排列整齐_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:17:291333parcourir
]#headertop{width:800px;height:20px;background:#CCFF77;}#headertop ul{list-style:none;}#headertop ul li{float:left;margin:10px auto 10px 0}#headerbottom{width:800px;height:80px;background:#CCFF44}#headerbottomleft{width:100px;height:80px;text-align:left;background:#CCFF55}#headerbottomcenter{width:400px;height:70px;background:#CCFF33}#headerbottomright{width:300px;height:70px;background:#CCFF66}<div id="header"> <!--页面头部--> <div id="headertop"> <ul> <li>亲，欢迎来淘宝！请</li> </ul> </div> <div id="headerbottom"> <div id="headerbottomleft"></div> <div id="headerbottomcenter"> </div> <div id="headerbottomright"></div> </div> </div> [img=http://img.my.csdn.net/uploads/201212/09/1355025101_9227.jpg][/img我就是这样写的，怎么就是排列不整齐
回复讨论(解决方案)
<html><head> <style type="text/css">#header{width:798px;height:198px;border:1px solid blue; }#headertop{width:798px;height:48px;background:#CCFF77;border-bottom: dashed 1px;}#headertop ul{list-style:none;display: inline;}#headertop ul li{float: left;line-height: 48px;margin-left:40px; }#headerbottom{width:798;height: 148px;background: #CBFF43;}#headerbottomleft{width: 100;height: 80px;margin: 0 auto;border-left: dashed 1px;border-right: dashed 1px;}#headerbottomcenter{width: 384px;height:68px;margin:0 auto;border-top:dashed 1px;border-left: dashed 1px;border-right: dashed 1px;} </style><body> <div id="header"> <!--页面头部--> <div id="headertop"> <ul> <li>亲，欢迎来淘宝！请</li> </ul> </div> <div id="headerbottom"> <div id="headerbottomleft"></div> <div id="headerbottomcenter"> </div> <div id="headerbottomright"></div> </div> </div></body> 我也新手呢，不对的地方请多包含，左后一个headerbottomright我没用，因为不知道哪里要用。
#headerbottom{width:800px;height:80px;background:#CCFF44;clear:both;}
#headerbottomleft{width:100px;height:80px;text-align:left;background:#CCFF55; float:left;}
#headerbottomcenter{width:400px;height:70px;background:#CCFF33; float:left;}
#headerbottomright{width:300px;height:70px;background:#CCFF66; float:right;}
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拆分单元格_html/css_WEB-ITnoseArticle suivant：诡异的div边距，要命的无解问题，诚心求答案_html/css_WEB-ITnose