我想完成两件事:
1) 修复导航栏的厚度，使其上下填充 8px。现在它看起来像它的 20-30px。导航栏应为 100% 宽，导航栏菜单应居中 960 像素。
2) 左对齐网站标题，右对齐同一行的菜单链接。
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/