gpt4 book ai didi

html - "logo"和 "navbar"在 header 中的定位

转载 作者:太空宇宙 更新时间:2023-11-03 20:00:52 26 4
gpt4 key购买 nike

这已经让我难受了好几个小时:'( 谁能帮我把 Logo 和导航栏放在标题内???

我试图将“ Logo ”放在标题内(左侧)和标题内的“导航栏”(右侧),但即使我尝试了许多不同的属性,我的导航栏始终在标题之外容器...标题应该是固定的。

http://jsfiddle.net/L7kPu/10/

<header>
<a href="#" id="logo">Logo</a>

<ul id="nav" class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

</header>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>

html, body{
margin:0px; padding:0px; height: 100%; }

section {
height: 100%;
}

header{
z-index: 1;
position:fixed;
width:100%;
background:rgba(0,0,0,0.1);
}

header ul{
float:right;

}

header ul li{
display: inline;
float:left;

}
header a{
color:white;
background:rgba(0,0,0,0.1);
display:inline-block;
padding:0px 30px;
height:60px;
line-height:60px;
text-align:center;
font-family: 'Roboto Slab', serif;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
font-weight:700;
}

最佳答案

你的 ul 有边距和填充:)

Working Fiddle

header ul{
float:right;
padding: 0;
margin: 0;
}

header ul li{
display: inline;
float:left;
}
header a{
color:white;
background:rgba(0,0,0,0.1);
display:inline-block;
padding:0px 25px;
height:60px;
line-height:60px;
text-align:center;
font-family: 'Roboto Slab', serif;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
font-weight:700;
}

为了 fiddle ,我还更改了 header a 的左右填充。

关于html - "logo"和 "navbar"在 header 中的定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17197961/

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