（响应式导航菜单）@media 为什么ul中的li放大后屏幕会出现滚动条？

问题描述：

做了个响应式导航菜单的练习，虽然放大后达到了效果，但是为什么出现了滚动条？求指导一下我，这是什么问题，如何让滚动条消失？@media中明明设置了width: 100%; 那么这个100%是按照哪个对比参照去了，怎么还出现滚动条超过百分比了？

代码图片如下！本人是个小白，这么愚蠢的问题希望得到解答！不胜感激

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        ul {
            background-color: pink;
            /* 因为ul没有设置长宽，所以这时的li是溢出的，设置了overflow之后可以包含溢出的。比如hidden是隐藏溢出的内容,因为本身没有长宽所以就转变成“自动长宽”把自己的东西包含进来，当时auto也行。 */
            overflow: auto;
            padding: 0;
            margin: 0;
        }
        li {
            float: left;
            padding: 10px;
            list-style-type: none;
        }
        a {
            text-decoration: none;
            color: white;
        }
        li:hover {
            background-color: gray;           
        }
        a:hover {
            color: black;
        }
        /* 为什么放大会有滚动条为什么为什么为什么为什么？？？ */
        @media screen and (max-width: 600px) {
            li {
                float: none;
                width: 100%;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    </div>
        <ul>
            <li><a href="">first</a></li>
            <li><a href="">second</a></li>
            <li><a href="">third</a></li>
        </ul>
    </div>
</body>
</html>

答

li 添加box-sizing: border-box;


li {
            float: left;
            padding: 10px;
            list-style-type: none;
box-sizing: border-box;
        }

（响应式导航菜单）@media 为什么ul中的li放大后屏幕会出现滚动条？

相关推荐