Question

所以我有两个div s作为我的标题，一个导航栏和一个横幅（一个带有背景图像的div），然后我得到了我的内容div，我将把其他div具有特定内容的width:100%。我按照教程教导了内容如何滚动横幅以及固定在页面顶部的导航栏下方。导航栏和横幅都有position:fixed和width:100%，而内容包含position:relative和div，如教程所示。

问题是内容div偏离中心一点点，以一种页面必须水平滚动的方式。后来，当我添加新的width:100%时，它们都有不同的宽度，即使它们都有div。最后，页面很乱，<body> <div class="logo"></div> <nav> <ul> <li><a href="#menu_1">Menu 1</a></li> <li><a href="#menu_2">Menu 2</a></a></li> <li><a href="#menu_3">Menu 3</a></li> <li><a href="#menu_4">Menu 4</a></li> </ul> </nav> <div id="banner"> <h1>lorem ipsum</h1> </div> <div id="content"> <h1>Lorem Ipsum Bacon</h1> <p>Lorem ipsum dolor sit amet</p> </body>的宽度完全不同。

我会尝试发布代码：

    nav
{
    height: 100px;
    background: #FFFFFF;
    position:fixed;
    top:0px;
    left:0px;
    width: 100%;
    z-index: 10;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    margin:auto;
}
nav ul
{
    padding: 0;
    margin: 0;
    list-style: none;
    background: #FFFFFF;
    height: 40px;
}
nav li
{
    display: inline;
}
nav a:link, a:visited
{
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    background:transparent;
}
nav li a, li a:visited
{
    display: block;
    color: #000000;
    width: 104px;
    height: auto;
    line-height: 73px;
    padding: 10px;
    display: inline-block;
}
nav li a:hover
{
    display: block;
    color: #FFFFFF;
    background: #AED135;
    line-height: 20px;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: inline-block;
}
#banner
{
    width: 100%;
    height: 500px;
    position: fixed;
    background: url(imgs/header_img.jpg);
    background-size: cover;
    top: 100px;
    left:0px;
}
#content
{
    background:#fff;
    width:100%; 
    position:relative;
    top:610px;
    z-index:5;
    height:1000px;
}

和CSS：

{{1}}

不知道我做错了什么。请尽可能随意“愚蠢”回答你的答案！我读的关于宽度和位置的东西越多，我得到的就越混乱！

Answer 1

默认情况下，正文有一些边距像素，请尝试添加：

 body {
       margin: 0;
  }

两个分开的div，100％宽度不匹配

1 个答案: