gpt4 book ai didi

css - 两个宽度为 100% 的分隔 div 不匹配

转载 作者:太空宇宙 更新时间:2023-11-03 17:58:45 25 4
gpt4 key购买 nike

所以我得到了两个用作标题的 div,一个导航栏和一个横幅(一个应用了背景图像的 div),紧接着我得到了我的内容 div稍后将放置具有特定内容的其他 div。我遵循了一个教程,教内容如何在横幅上和固定在页面顶部的导航栏下滚动。导航栏和横幅都有 width:100%position:fixed,而内容有 width:100%position:相对按照教程的指示。

问题是内容 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>

和CSS:

    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;
}

不知道我做错了什么。请随意“简化”您的答案!我对宽度和定位等内容了解得越多,我就越困惑!

最佳答案

主体默认有一些边距像素,尝试添加这个:

 body {
margin: 0;
}

关于css - 两个宽度为 100% 的分隔 div 不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25797716/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com