ホームページ >ウェブフロントエンド >htmlチュートリアル >div ul li 初心者向けの基本的な質問です。専門家は参考にしてください。_html/css_WEB-ITnose
div ul li 初心者向けの基本的な質問です。専門家は参考にしてください。_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 12:01:331227ブラウズ
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388
.header-nav {margin: 0 auto; マージン:3px 3px ; 境界線: 薄い実線の赤。 }
.header-nav ul { width:99%; マージン:3px 3px ; 境界線: 薄い、しっかりした、黒。 }
.header-nav li { float: left; 幅:13%; list-style-type: なし;
マージン:3px 3px ; 境界線: 薄いオレンジ色。 }
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
4f8a00ac777abf0abce61381bef15aee
25edfb22a4f469ecb59f1190150159c68aa2918506a11e8a886e85949f1eb079首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c607e2a4fdaeb60d92b9f7ed7533c0ffe0品牌中心5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c607e2a4fdaeb60d92b9f7ed7533c0ffe0专家团队5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
返還论(解決案)
如果li float了之後，会影响兄弟，父级元素。 ee
如果li float了之后
デモはここにあります
<!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>
その後はどうすればいいですか
.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了後，会影响兄弟，父级元素。么 意思
.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
<!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>