gpt4 book ai didi

html - 如何将此导航栏保持在中央?

转载 作者:行者123 更新时间:2023-11-28 06:50:31 26 4
gpt4 key购买 nike

目前我有一个标题,上面有我的导航栏。在我的编辑器上,它居中但是当我拉伸(stretch)页面或以不同的格式查看它时,它不会出现在页眉中心的顶部。关于我应该做什么的任何想法?

#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
}

#nav li{
float:left;
}

#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;

}

#nav a:hover{
background-color: orangered;
}

#nav a:active{
color:black;
}

#header{
height:150px;
background-color:darkred;
margin-top:45px;
border:2px solid black;
border-radius:15px;
overflow:hidden;
position:relative;
}

#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}

#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
 <body>
<ul id="nav">
<li><a href="Exe.com">Home</a></li>
<li><a href="Exe.com">Photos</a></li>
<li><a href="Exe.com">Statistics</a></li>
<li><a href="Exe.com">Chat</a></li>
<li><a href="Exe.com"> Biography </a></li>
</ul>

<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>

我提供的大部分内容对这个问题都没有用,对此我深表歉意,但我只是想提供尽可能多的信息以获得帮助。谢谢!

最佳答案

嗨,现在试试这个 css

#nav {
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0 auto;
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block; // add this
font-size: 14px; // add this
}
#header {
/* margin-top: 45px; */ // remove this line
}

演示

#nav {
list-style-type: none;
/* position: absolute; */
padding: 0;
overflow: hidden;
margin: 0 auto;
/* margin-left: 50px; */
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block;
font-size: 14px;
}
#header {
height: 150px;
background-color: darkred;
/* margin-top: 45px; */
border: 2px solid black;
border-radius: 15px;
overflow: hidden;
position: relative;
}

#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;

}

#nav a:hover{
background-color: orangered;
}

#nav a:active{
color:black;
}


#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}

#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
 <body>
<ul id="nav">
<li><a href="Exe.com">Home</a></li>
<li><a href="Exe.com">Photos</a></li>
<li><a href="Exe.com">Statistics</a></li>
<li><a href="Exe.com">Chat</a></li>
<li><a href="Exe.com"> Biography </a></li>
</ul>

<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>

关于html - 如何将此导航栏保持在中央?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33796394/

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