【问题标题】：How should I fill with color the nav-bar? - css我应该如何为导航栏填充颜色？ -CSS
【发布时间】：2020-06-07 17:23:38
【问题描述】：
我想制作一个网站菜单，我用 HTML 和 CSS 制作了以下代码。问题是在 home 与 Home 和 Contact 之间有一个空格。有什么想法可以解决这个问题吗？
li {
text-decoration: none;
display: inline;
}
a {
text-decoration: none;
color: white;
padding: 3vh;
font-family: 'Oswald', sans-serif;
background-color: #595959;
}
#about, #gallery, #contact {
float: right;
}
#home {
float: left;
}
a:hover {
background-color: #969696;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="gallery">Gallery</a></li>
<li><a href="#" id="contact">Contact</a></li>
</nav>
</header>
</body>
</html>
【问题讨论】：
标签：
html
css
menu
navigation
【解决方案1】：
解决方案非常简单。
在您的 CSS 中，您曾说过 about、gallery 和 contact 具有浮动权限。
当你说 home 元素必须浮动到左边时，这会将这 3 个元素带到右边。
所以它会向左对齐，从而在它们之间创建空白区域。如果您想删除空白并将所有这 4 个元素对齐在一起，如下所示：https://imgur.com/a/e4ayr6b
那么代码就很简单了：
#about,
#gallery,
#contact {
float: left;
}
现在这个向左浮动会将其他 3 个元素与主页按钮对齐。
然后家里仍然会有float: left。
如果您不希望这样，那么您的问题并不是说元素应该左对齐还是什么。你刚才说应该删除空白。所以上面的解决方案就可以了。
希望对你有帮助
【解决方案2】：
我认为您实际上可能正在寻找类似的东西。我已将您的项目更改为类与 ID，因为这是更好的做法。
我也不会在 a 元素上设置填充，因为您可能需要在其他地方使用它。下面是向您展示所需效果的起点，但您应该使用相同的代码重新开始，但修改您的 CSS 类，以便您的标题具有特定的类，而不是立即影响整个站点的该属性，因为它会在以后引起问题开。
li {
text-decoration: none;
display: inline;
}
a {
text-decoration: none;
color: white;
padding: 3vh;
font-family: 'Oswald', sans-serif;
background-color: #595959;
}
.right-item {
float: right;
}
.left-item {
float: left;
}
a:hover {
background-color: #969696;
}
.nav-wrap {
background-color: #595959;
height: 60px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="nav-wrap">
<li><a href="#" class="left-item">Home</a></li>
<li><a href="#" class="right-item">About</a></li>
<li><a href="#" class="right-item">Gallery</a></li>
<li><a href="#" class="right-item">Contact</a></li>
</div>
</nav>
</header>
</body>
</html>
【解决方案3】：
li {
text-decoration: none;
display: inline;
}
a {
text-decoration: none;
color: white;
padding: 3vh;
font-family: 'Oswald', sans-serif;
background-color: #595959;
}
a:hover {
background-color: #969696;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="gallery">Gallery</a></li>
<li><a href="#" id="contact">Contact</a></li>
</nav>
</header>
</body>
</html>
您正在将浮动属性应用于您的菜单项，这是不需要的。
【解决方案4】：
li {
text-decoration: none;
display: inline;
}
a {
text-decoration: none;
color: white;
padding: 3vh;
font-family: 'Oswald', sans-serif;
background-color: #595959;
}
a:hover {
background-color: #969696;
}
nav{
text-align:right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NavBar Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="gallery">Gallery</a></li>
<li><a href="#" id="contact">Contact</a></li>
</nav>
</header>
</body>
</html>
虽然这对于现实世界的网站来说并不理想。我希望它会有所帮助