我应该如何填充导航栏的颜色？ - css

Question

我想制作一个网站菜单，我用 HTML 和 CSS 制作了以下代码。问题是在主页与主页和联系人之间有一个空格。有解决这个问题的想法吗？

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>

Answer 1

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>

您正在对您的菜单项应用浮动属性，这不是必需的。

Answer 2

解决方案非常简单。

在您的 CSS 中，您说过关于、图库和联系方式具有浮动权限。所以当你说 home 元素必须向左浮动时，这会将这 3 个元素带到右边。

所以它会将它向左对齐，从而在它们之间创建白色 space。如果你想删除白色 space 并将所有这 4 个元素对齐在一起，如下所示：https://imgur.com/a/e4ayr6b 那么代码就简单了：

#about,
#gallery,
#contact {
  float: left;
}

现在这个向左浮动将使其他 3 个元素与主页按钮对齐。

然后家里还有float: left。

如果您不希望这样，那么您的问题并不是说元素应该向左对齐还是什么。你刚才说白色 space 应该被删除。所以上面的解决方案就可以了。

希望对您有所帮助

Answer 3

我想你可能真的在找这样的东西。我已将您的项目更改为类与 ID，因为这是更好的做法。

我也不会在 a 元素上设置填充，因为您可能需要在其他地方使用它。下面是向您展示所需效果的起点，但您应该使用相同的代码重新开始，但修改您的 CSS 类，以便您的 header 具有特定的类 vs 立即影响整个网站属性，因为它会在以后引起问题。

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>

Answer 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>

虽然这对于真实世界的网站来说并不理想。希望对你有帮助

我应该如何填充导航栏的颜色？ - css

How should I fill with color the nav-bar? - css

html

css

navigation

menu