div ul li 初心者向けの基本的な質問です。専門家は参考にしてください。_html/css

div ul li 初心者向けの基本的な質問です。専門家は参考にしてください。_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:01:33

オリジナル

1196 人が閲覧しました

返還论(解決案)

如果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>

ログイン後にコピー