Home >Web Front-end >HTML Tutorial >div ul li Basic questions for beginners. There are pictures and codes. Experts can take a look. Thank you._html/css_WEB-ITnose
div ul li Basic questions for beginners. There are pictures and codes. Experts can take a look. Thank you._html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:01:331278browse
e1f4ff64491df66c6185f6e73063b5a3
acf251eef30dadcd95fda0b63932cc24
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
ef0d2420b1e5291570a81009eee48a1a
.header-nav {margin: 0 auto; margin:3px 3px ; border: thin solid red; }
.header-nav ul { width:99%; margin:3px 3px ; border: thin solid black; }
.header-nav li { float: left; width:13%; list-style-type: none;
margin:3px 3px ; border: thin solid orange; }
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
71126e61419f63f4ca0c2559b235817f
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c64a9a15db5196d2224f74a8c9d60ee538首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6229377474ba2149f969981f27d68b573品牌中心5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6229377474ba2149f969981f27d68b573专家团队5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
回复讨论(解决方案)
如果li float了之后，会影响兄弟，父级元素。所以必须使用clear来清除。
demo here
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .header-nav {margin: 0 auto; margin:3px 3px ; border: thin solid red; } .header-nav ul { width:99%; margin:3px 3px ; border: thin solid black; } .header-nav li { float: left; width:13%; list-style-type: none;margin:3px 3px ; border: thin solid orange; } .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} .clearfix{display:inline-block;} html[xmlns] .clearfix{display:block;} * html .clearfix{height:1%;} </style></head><body><div class="header-nav"> <ul class="clearfix"> <li><a href="">首页</a></li> <li><a href="" target="_blank">品牌中心</a></li> <li><a href="" target="_blank">专家团队</a></li> </ul></div></body></html>
如果li float了之后，会影响兄弟，父级元素。所以必须使用clear来清除。
demo here
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .header-nav {margin: 0 auto; margin:3px 3px ; border: thin solid red; } .header-nav ul { width:99%; margin:3px 3px ; border: thin solid black; } .header-nav li { float: left; width:13%; list-style-type: none;margin:3px 3px ; border: thin solid orange; } .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} .clearfix{display:inline-block;} html[xmlns] .clearfix{display:block;} * html .clearfix{height:1%;} </style></head><body><div class="header-nav"> <ul class="clearfix"> <li><a href="">首页</a></li> <li><a href="" target="_blank">品牌中心</a></li> <li><a href="" target="_blank">专家团队</a></li> </ul></div></body></html> 那after 是什么 意思
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;} 这个又是什么意思
老大,我是菜鸟能不能解释细点,或弄简单点
而且 我用了,没效果啊,还是没变化
有效果 ,但那个ul还是超出了div 它不是在div里面吗,怎么超出去了
如果li float了之后，会影响兄弟，父级元素。所以必须使用clear来清除。
demo here
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} .header-nav {margin: 0 auto; margin:3px 3px ; border: thin solid red; } .header-nav ul { width:99%; margin:3px 3px ; border: thin solid black; } .header-nav li { float: left; width:13%; list-style-type: none;margin:3px 3px ; border: thin solid orange; } .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} .clearfix{display:inline-block;} html[xmlns] .clearfix{display:block;} * html .clearfix{height:1%;} </style></head><body><div class="header-nav"> <ul class="clearfix"> <li><a href="">首页</a></li> <li><a href="" target="_blank">品牌中心</a></li> <li><a href="" target="_blank">专家团队</a></li> </ul></div></body></html> 那after 是什么 意思
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;} 这个又是什么意思
老大,我是菜鸟能不能解释细点,或弄简单点
关于clearfix
个人建议问百度或许比较更全面清楚一点， http://www.baidu.com/s?wd=clearfix&rsv_bp=0&tn=baidu&rsv_spt=3&ie=utf-8&rsv_sug3=1&rsv_sug4=42&rsv_sug1=1&rsv_sug2=0&inputT=1028
超出去的原因，没有重置css。
什么是重置css
*{margin:0;padding:0;}