Question

下面，我将标题固定在顶部，设置width: 100%并将边距应用于body的{{1}}元素。我希望标头保留在视口的100％宽度，但是现在它具有左侧边距，但到达右侧视口的末端。

margin: 10%

            * {
                box-sizing: border-box;
            }
            
            
        
            header {
                position: fixed;
                background-color: #59b1ff;
                top: 0;
                height: 20px;
                width: 100%;
            }
            
            body {
                margin: 20%;
            }
            
            div {
                border: 1px solid grey;
            }

为什么标题未附加到左视口边缘？

Answer 1

为什么标题未附加到左视口边缘？

因为您没有指定您希望其左边缘位于何处。

您基本上将left保留为默认的auto，因此考虑了该元素在流中的自然位置（如果未定位）。

添加left: 0，它的行为将与您想要的一样。

Answer 2

只需添加left: 0

* {
  box-sizing: border-box;
}

header {
  position: fixed;
  background-color: #59b1ff;
  top: 0;
  left: 0;
  height: 20px;
  width: 100%;
}

body {
  margin: 20%;
}

div {
  border: 1px solid grey;
}

<header>Header</header>

<main>
<div>Div</div>
</main>

Answer 3

实际上，问题出在您的标头元素上。每当使用固定或绝对定位时，还必须在固定元素中指定左侧，右侧或顶部（根据需要）。

            * {
                box-sizing: border-box;
            }
            
            
        
            header {
                position: fixed;
                background-color: #59b1ff;
                top: 0;
                height: 20px;
                width: 100%;
                left:0;  /*Added this*/
                right:0; /*Added this*/
            }
            
            body {
                margin: 20%;
            }
            
            div {
                border: 1px solid grey;
            }

<header>Header</header>

<main>
<div>Div</div>
</main>

Answer 4

尝试添加以下规则：

header {
  position: fixed;
  background-color: #59b1ff;
  top: 0;
  left: 0; /* stick the header to the viewport's left */
  height: 20px;
  width: 100%;
}

body {
  position: relative; /* allows the header to be positioned relative to the body */
  margin: 20%;
}

Answer 5

仅将left属性设置为零。将其设置为默认值，它将采用此元素在流中的自然位置。

标题为何不与主体边距居中？

5 个答案: