如何制作维基百科导航栏？答案

【问题标题】：How can I make the Wikipedia navbar?如何制作维基百科导航栏？
【发布时间】：2022-10-14 23:48:28
【问题描述】：

我正在尝试以 HTML 格式复制 Wikipedia 导航栏，但遇到了一些麻烦。我创建了一个标题容器，但里面的格式很奇怪，我不知道为什么。我也尝试为按钮制作一个容器，但它不起作用，我不知道为什么。

我正在努力做到这一点：

但我最终得到了这个：

.body {
  height: 4940px;
  border: solid 1px #a7d7f9;
  margin-top: 78px;
  margin-right: 0px;
  border-right: none;
}
.header {
  border-bottom: solid 1px #a7d7f9;
  height: 76px;
  width: 100%;
  margin-left: 170px; 
  display: block;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 21%, rgba(0,0,0,0.03403359634869574) 100%); 
}
.headerButtonsContainer {
  width: 700px;
  background-color: red;
  display: inline-block;
}
.headerArticleButton {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0.21890754592852768) 0%, rgba(255,255,255,1) 100%); 
  border-right: 1px solid #a7d7f9;
  border-top: none;
  border-left: none;
  border-bottom: none;
  color: black;
  cursor: pointer;
  height: 3.07692308em;
  position: relative;
  top: 37px;
  padding-top: 1.25em;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 0.8125em;
  display: block;
}
.headerTalkButton {
  background: rgb(167,215,249);
  background: linear-gradient(180deg, rgba(167,215,249,0.03547356442577032) 9%, rgba(167,215,249,0.3744091386554622) 100%); 
  border-right: 1px solid #a7d7f9;
  border-top: none;
  border-left: none;
  border-bottom: none;
  color: black;
  cursor: pointer;
  height: 3.07692308em;
  position: relative;
  padding-top: 1.25em;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 0.8125em;
  display: block;
  margin-left: 80px;
}
.headerReadButton {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0.21890754592852768) 0%, rgba(255,255,255,1) 100%); 
  border-right: 1px solid #a7d7f9;
  border-top: none;
  border-left: 1px solid #a7d7f9;
  border-bottom: none;
  color: black;
  cursor: pointer;
  height: 3.07692308em;
  position: relative;
  top: 37px;
  padding-top: 1.25em;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 0.8125em;
  display: block;
  margin-left: 730px;
}

<div class="header">
    <div class="headerbuttonsContainer">
        <button class="headerArticleButton">Article</button>
        <button class="headerTalkButton">Talk</button>
        <button class="headerReadButton">Read</button>
        <button class="headerViewSourceButton">View source</button>
        <button class="headerViewHistoryButton">View history</button>
        <input class="headerSearchBar" placeholder="Search Wikipedia">
   </div>
</div>

有人可以帮我吗？我会很感激。

【问题讨论】：

您可以在 Wiki 页面检查元素。您将看到所需的结构更改。您还可以单击每个元素并查看 css。
不要像你一样使用这么多固定值来定位和宽度/高度。阅读 flexbox 和 grid 的工作原理并牢记这一点重写你的代码。

标签： html css

【解决方案1】：

你制作 CSS 的方法不好，它没有响应。您应该使用其他方法，例如使用 flex 位置或网格，... 它还将使您的代码更具可读性。这是您可以使用的样式示例。如果你真的想复制设计，你也可以查看维基百科网站。

.body {
  // height: 4940px;
  border: solid 1px #a7d7f9;
  margin-top: 78px;
  margin-right: 0px;
  border-right: none;
}
.header {
  border-bottom: solid 1px #a7d7f9;
  display: block;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 21%, rgba(0,0,0,0.03403359634869574) 100%); 
}

button {
    padding:10px;
}
.headerbuttonsContainer {
  display: flex;
  justify-content : space-between;
}
.headerArticleButton {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0.21890754592852768) 0%, rgba(255,255,255,1) 100%); 
  border-right: 1px solid #a7d7f9;
  border-top: none;
  border-left: none;
  border-bottom: none;
  color: black;
  cursor: pointer;
  font-size: 0.8125em;
}
.headerTalkButton {
  background: rgb(167,215,249);
  background: linear-gradient(180deg, rgba(167,215,249,0.03547356442577032) 9%, rgba(167,215,249,0.3744091386554622) 100%); 
  border-right: 1px solid #a7d7f9;
  border-top: none;
  border-left: none;
  border-bottom: none;
  color: black;
  cursor: pointer;
}

<div class="header">
    <div class="headerbuttonsContainer">
        <div>
            <button class="headerArticleButton">Article</button>
            <button class="headerTalkButton">Talk</button>
        </div>
        <div>
             <button class="headerArticleButton">Read</button>
             <button class="headerTalkButton">View source</button>
             <button class="headerTalkButton">View history</button>
             <input class="headerSearchBar" placeholder="Search Wikipedia">
        </div>
   </div>
</div>

【讨论】：