Rumah >hujung hadapan web >html tutorial >div ul li新手初级问题,有图有代码,高手来看看谢谢._html/css_WEB-ITnose
div ul li新手初级问题,有图有代码,高手来看看谢谢._html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:01:331184semak imbas
nbsp;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>
如果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;} Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Codeforces Round #258 (Div. 2) B. Jzzhu and Sequences（矩阵快速幂）_html/css_WEB-ITnoseArtikel seterusnya：Bootstrap定制(二)less基础语法_html/css_WEB-ITnose