英文:
Trying to learn the "making of navigation bar"
问题
我阅读了一些文章，但无法清楚理解它们。
我想让我的导航栏具备一些特点，
- 导航栏的背景颜色不应该在上面和两侧留有空隙
- 我希望元素位于中间，但彼此之间有一些间隔。
#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
}
有哪些制作良好的导航栏的不同方法？
我已经尝试阅读来自许多网站的各种文章。
英文:
I read some articles but couldn't understand them clearly.
There are some things I want my navigation bar to have,
- The background color of the navigation bar shouldn't have a gap above and on the sides
- I want the elements to be in center but with a some gap between each other.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
What are different ways to make a good navigation bar?
I have tried to read various articles from many websitA
答案1
得分: 0
#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
display: flex;
justify-content: center;
column-gap: 30px;
}
i think this work
英文:
#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
display: flex;
justify-content: center;
column-gap: 30px;
}
i think this work
答案2
得分: 0
额外的空间来自body元素的默认边距，您可以将其重置为0：
body {
margin: 0;
}
对于导航，您可以使用flex来居中以及在每个项目之间添加一些间距：
#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
display: flex;
justify-content: space-evenly;
}
以下是应用上述调整的示例：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
margin: 0;
}
#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
display: flex;
justify-content: space-evenly;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
英文:
The extra space is from body element's default margins, you can reset it to 0:
body {
margin: 0;
}
For the navigation, you can use flex to center it as well as giving some space between each item:
#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
display: flex;
justify-content: space-evenly;
}
Here is an example with the above tweaks:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
margin: 0;
}
#nav_bar {
background-color: aliceblue;
padding: 14px 16px;
width: 100%;
display: flex;
justify-content: space-evenly;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论