一个关于样式的问题

Question

html


<ul id="nav" class="nav">
    <li>
        <h2><span>首页</span></h2>
        <ul>
            <li><a href="#">网站介绍</a></li>
            <li><a href="#">精品套餐</a></li>
            <li><a href="#">xx特色</a></li>
            <li><a href="#">免费试听</a></li>
        </ul>
    </li>
</ul>


css

.nav li{
    width: 300px;
    height: 200px;
}
为什么这样设置之后li的长度是全屏的？但是给.nav设置长度之后li又生效

Answer 1

题主，我把代码复制过来后，另外设定背景色，效果是这样的：

可见宽度正是你设定的值

Answer 2

ul li 是组合标签。
默认情况下，li应该是继承ul的宽度。

有可能是浏览器内核解析的时候 ul 和 li 渲染成一个标签， 宽度由ul决定。

Answer 3

UL和LI都是块级元素，都有宽和高，默认不设置宽度都是100%，设置后.nav后，li继承ul的宽度，说白了就是包裹住li

Answer 4

li是块级元素，默认是占父容器的100%，单纯设置宽度是无效的，这个可以参考div，如果想让宽度生效，要么设置display:inline-block，要么设置float:left。