首页 > 为什么这个css设置后这么奇怪??

为什么这个css设置后这么奇怪??

<nav  id="nav_4">
    <li id="f1">客户管理</li>
    <li>市场活动</li>
    <li>外包管理</li>
</nav>

#nav_4{
    border:red dotted 1px;
}
#nav_4>li{
    display:inline;
    background:url("../img/圆角矩形-2.png") no-repeat 0px 0px;
    background-size:100% 100%;
    border:red dotted 1px;
    padding:10px 22px;/*盒子宽92px*/
    font-family:微软雅黑;
    font-size:12px;

    color:#ffffff;
    margin:0px;

}
问题是:nav元素为什么高度不等于li元素的高度??
而且li元素的内容消失不见??

而且将代码隔离却显示部分代码为红色??


你把li中字体颜色设置了白色……当然看不到了
高度问题是你设置了display:inline;改为inline-block就可以了


部分代码为红色,是因为红色部分前面那句注释,遇到 */ 就认为注释结束了


li 高度和 ul 不同, 原因是你设置了 display: inline, inline-level 元素的高度会和你内容的字体大小和padding 相关,和你的ul高度无关,如果你设置了 display: inline-block 会和父级容器保持一致。

【热门文章】
【热门文章】