gpt4 book ai didi

html - 无法使用填充使导航栏的高度变小

转载 作者:太空宇宙 更新时间:2023-11-04 13:24:22 24 4
gpt4 key购买 nike

我想完成两件事:

1) 修复导航栏的厚度,使其上下填充 8px。现在它看起来像它的 20-30px。导航栏应为 100% 宽,导航栏菜单应居中 960 像素。

2) 左对齐网站标题,右对齐同一行的菜单链接。

http://jsfiddle.net/5rp5B/

HTML

<header>

<div class="nav_top_bar">
<nav class="nav_top_menu">
<ul>
<li class="nav_top_title">Web Site Title</li>
<li><a href="" class="blue">Home</a></li>
<li><a href="" class="green">Products</a></li>
<li><a href="" class="orange">Services</a></li>
<li><a href="" class="purple">About</a></li>
<li><a href="" class="yellow">Contact</a></li>
</ul>
</nav>
</div>

CSS

.nav_top_bar {
background-color: #333333;
padding: 8px 0;
width: 100%;
}

.nav_top_menu {
color: #c3c3c3;
font-size: 1em;
margin: 0 auto;
text-align: left;
width: 960px;
}

.nav_top_title {
padding-right: 30px;
}

.nav_top_menu ul {
list-style: none;
text-align: left;
}

.nav_top_menu ul li {
display: inline;
}

.nav_top_menu ul li a {
color: #c3c3c3;
padding: 8px 16px;
}

最佳答案

如果您的问题是顶部栏的高度似乎太大,请尝试将其添加到您的样式中以删除 <ul> 上的默认边距。元素:

.nav_top_menu ul {
margin:0;
}

对于标题和链接,您可以改为这样做,这将使除标题之外的所有内容都向右对齐,标题将 float 到左侧:

.nav_top_menu ul {
margin: 0;
list-style: none;
text-align: right;
}
.nav_top_menu ul li {
display: inline;
}
.nav_top_menu ul li.nav_top_title {
float: left;
padding-right: 30px;
}

是的,确保从 <body> 中删除默认边距元素也是:

body {
margin: 0;
}

关于html - 无法使用填充使导航栏的高度变小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23836777/

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