Question

我尝试使用div代码，但结果如下：

enter image description here

在左侧，您可以看到它没有向右移动。我已在四种不同的浏览器中尝试过，因此这不是浏览器问题。

这是html代码：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@page_title</title>
    <style>
        div {border: 3px solid black; width: 120%; margin: 1.2em; padding: 2em}
    </style>
</head>
<body>
    <div class="div">
        <h1>@page_title</h1>

    </div>
</body>
</html>

Answer 1

您是否将width设为120%？默认情况下，块级元素是父级的100％，因此您无需更改宽度。

Demo

<强> HTML

<div>
  <h1>@page_title</h1>
</div>

<强> CSS

div {
    padding: 2em;
    margin: 2em;
    border: 3px solid black;
}

Answer 2

保证金告诉元素应该远离其相邻元素和（在大多数情况下）其父元素。

所以保证金：1.2em正在将这个数量从左边缘推出。首先，删除

第二：如果你想让div跨越其容器的宽度（在本例中是主体），那么使用width:auto。这将使其宽度等于父元素宽度，考虑元素上的任何边距或填充。

使div跨越屏幕的整个宽度

2 个答案: