css 尝试学习“导航栏的制作”

t1rydlwq 于 2023-03-09 发布在其他

关注(0)|答案(2)|浏览(133)

我看了一些文章，但是看不清楚。我希望我的导航栏有一些东西，
1.导航栏的背景色在

上方和两侧不应有间隙
1.我希望元素在中心，但彼此之间有一些差距。

#nav_bar {
  background-color: aliceblue;
  padding: 14px 16px;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Product Landing Page</title>
</head>

<body>
  <nav id="nav_bar" class="nav_class">
    <a href="#welcome">Home</a>
    <a href="#product-info">Products</a>
    <a href="#product-pricing">Pricings</a>
    <a href="#about">About</a>
    <a href="#contact">Contact Us</a>
  </nav>

  <section class="welcome">
    <h1>Hello</h1>
  </section>
</body>

</html>

制作一个好的导航栏有哪些不同的方法？
我试着从许多网站上阅读各种文章

css

来源：https://stackoverflow.com/questions/75682394/trying-to-learn-the-making-of-navigation-bar

2条答案

按热度按时间

neekobn81#

#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
display: flex;
justify-content: center;
column-gap: 30px;

}
我想这个管用

赞(0）回复(0）举报 2023-03-09

k5ifujac2#

额外的空间来自body元素的默认边距，您可以将其重置为0：

body {
  margin: 0;
}

对于导航，您可以使用flex使其居中，并在每个项目之间留出一些空间：

#nav_bar {
  background-color: aliceblue;
  padding: 14px 16px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

以下是上述调整的示例：
一个二个一个一个

赞(0）回复(0）举报 2023-03-09

我来回答

css 尝试学习“导航栏的制作”

2条答案

相关问题

热门标签

最新问答