gpt4 book ai didi

html - 为什么没有出现

转载 作者:太空宇宙 更新时间:2023-11-04 10:11:09 25 4
gpt4 key购买 nike

不到 1 分钟,我就开始开发一个网站。

起初我开始固定标题的位置然后我做了一个名为“all”的包装div但是这个div没有出现请给我一个解决方案。

body {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Haettenschweiler;
}

#header {
height: 60px;
background: #363333;
position: fixed;
width: 100%;
}

.header {
margin-left: auto;
margin-right: auto;
width: 70%;
}

#logo {
float: left;
font-size: 40px;
color: white;
}

#menu {
float: right;
margin-right: 200px;
}
.menu{
list-style-type:none;
}
.menu li{
float:right;
font-size:24px;
display:block;
min-width:125px;
text-align:center;
margin-left:5px;
}
.menu li a{
min-width:125px;
display:block;
color:white;
text-decoration:none;
}

#all {
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family: Gloucester MT;
}
#left{
float:left;
background:yellow;
width:13%;
}
#right{
float:right;
background:yellow;
width:13%;
}
#center{
margin-left:auto;
margin-right:auto;
background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="header">
<div class="header">
<div id="logo">1111</div>
<div id="menu">
<ul class="menu">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</div>
</div>
</div>
<div id="all">
<div id="left">sadf</div>
<div id="right">sasadf</div>
<div id="center">sadf</div>
</div>
</body>
</html>

最佳答案

position: relative; 显示你的 .all div 并设置一个 top 值等于 height标题。

这是因为如果你没有设置 position: relative; 它会以父级(网页)作为引用显示,所以这就是为什么你的 .all div 显示在您网页的左上角。

header 显示在 .all div 上方,因为它是固定的,并且固定元素不在正常流程中。

body {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Haettenschweiler;
}

#header {
height: 60px;
background: #363333;
position: fixed;
width: 100%;
}

.header {
margin-left: auto;
margin-right: auto;
width: 70%;
}

#logo {
float: left;
font-size: 40px;
color: white;
}

#menu {
float: right;
margin-right: 200px;
}
.menu{
list-style-type:none;
}
.menu li{
float:right;
font-size:24px;
display:block;
min-width:125px;
text-align:center;
margin-left:5px;
}
.menu li a{
min-width:125px;
display:block;
color:white;
text-decoration:none;
}

#all {
position: relative;
top: 60px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family: Gloucester MT;
}
#left{
float:left;
background:yellow;
width:13%;
}
#right{
float:right;
background:yellow;
width:13%;
}
#center{
margin-left:auto;
margin-right:auto;
background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="header">
<div class="header">
<div id="logo">1111</div>
<div id="menu">
<ul class="menu">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</div>
</div>
</div>
<div id="all">
<div id="left">sadf</div>
<div id="right">sasadf</div>
<div id="center">sadf</div>
</div>
</body>
</html>

关于html - 为什么没有出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37593608/

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