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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-24 12:01:331267browse

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;}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn