css 初学的一个问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1087 天前的主题，其中的信息可能已经有所发展或是发生改变。

我的代码是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            max-width: 56rem;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="main">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
<!--        <li>28</li>-->
<!--        <li>29</li>-->
<!--        <li>30</li>-->
    </ul>
</div>
</body>
</html>

不太理解为什么当 li 的数量变多导致整个 div 高度变大的时候，整个 div 好像宽度也变化了，但是 f12 查看又没有变化，但是页面实际上发生了变化，往左偏移了一点点

再看了一下，是 margin 发生了变化，这是为什么呢？

div

HTML

title

4 条回复 • 2021-05-17 10:52:43 +08:00