a 转为块级元素－－宽度的问题

青松100 2021-01-23 02:28:43

我想请教一下：　#　31行　，我没有给 a 和　a的父级宽度，而　a 已变成块级元素。－－－块级元素如果没有宽度，默认是和父级一样宽。
只有行内或行内块元素，宽度才会由内容撑开。－－－但是为啥这些 a 已是块级元素，还是宽度根据内容来撑开？

谢谢大佬。



<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        

        .box1 {

            float: left;

            width: 209px;

            height: 45px;

            background-color: pink;

        }

        

        .box2 {

            float: left;

        }

        

        li {

            float: left;

            list-style: none;

        }

        

        .box a {

            display: block;

            height: 45px;

            line-height: 45px;

            padding: 0 30px;

            border: 1px solid #000;

            background-color: skyblue;

        }

    </style>

</head>



<body>

    <div class="box">

        <div class="box1"></div>

        <div class="box2">

            <ul>

                <li>

                    <a href="#">123</a>



                </li>

                <li>

                    <a href="#">123aaaa</a>



                </li>

                <li>

                    <a href="#">123bbbbb</a>



                </li>

            </ul>

        </div>

    </div>

</body>



</html>