内容限制 - 安全区域

Question

我正在尝试建立一个网站。使用以下方法设置 1024 像素的限制：

body {
  width:1024px;
  margin:0 auto;
}

我的页面是这样的：

但是，实际上，我的页面必须如下所示：

看到了吗？导航栏？

即使内容有宽度限制，我还需要做什么才能获得完整的导航栏？

哦，我正在使用 materialize 框架制作网站，当然还有导航栏：http://materializecss.com/navbar.html

Answer 1

不要给 body 设置宽度！！！

因为 body 设置为 1024px body 中的每个项目将从它的边缘开始......你应该设置 body 中元素的宽度，这将允许您完全控制布局。

您的 header 和导航需要全屏显示，因此它们的宽度应为 100%。

然后可以设置 header 下方的项目并应用边距以符合您的想法。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>my site</title>
</head>

<body>

<div class="set-width"></div>

</body>
</html>

Answer 2

所以我应该在样式中设置如下内容：

     set-width {    width:1024px;
margin:0 auto;}

然后把导航栏代码变成这样？

 <div class="navbar-fixed">   
  <nav>
    <div class="nav-wrapper white"><div class="set-width">
      <a href="#" class="brand-logo center"><h5 class="center-align"><img src="Logo.png"></h5></a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="conta.html"><h5 class="center-align"><img class="responsive-img" src="http://feely.com.br/teste/Avatar.png"></h5></a></li>
        <li><a href="conta.html"></h5><span class="grey-text text-darken-4">OLÁ, USUÁRIO!</span></a></li>
      </ul>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="carrinho.html"><span class="grey-text text-darken-4"><i class="material-icons">shopping_cart</i></span></a></li>
        <li><a href="buscar.html"><span class="grey-text text-darken-4"><i class="material-icons">search</i></span></a></li></div>
        </ul>   
    </div>
  </nav>
 </div>

内容限制 - 安全区域

Limit for content - safe area

html

css

margin

materialize