css 导航栏位于顶部水平右侧

siv3szwd 于 2023-03-25 发布在其他

关注(0)|答案(1)|浏览(142)

请我挣扎在设置我的导航栏水平的右手边。

* {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #02082c;
  color: #f9f9f9;
}

.container {
  width: 85%;
  margin: 0 auto;
}

.brand {}

.logo {
  color: white;
  text-decoration: none;
}

.navbar {
  list-style: none;
  display: flex;
}

.navbar .nav-list {
  margin: 0 10px;
}

.navbar .nav-item {
  font-weight: 600;
  font-size: 18px;
}

<section id="header">
  <div class="container">
    <div class="brand">
      <h1><a href="#" class="logo">GOLD</a></h1>
    </div>
    <ul class="navbar">
      <li class="nav-list"><a href="#" class="nav-item">Home</a></li>
      <li class="nav-list"><a href="#" class="nav-item">About Us</a></li>
      <li class="nav-list"><a href="#" class="nav-item">Services</a></li>
      <li class="nav-list"><a href="#" class="nav-item">Contact Us</a></li>
    </ul>
  </div>
</section>

请有人帮我出去。

css

来源：https://stackoverflow.com/questions/75782085/navbar-to-be-be-on-the-top-horizontal-right-hand-side

1条答案

按热度按时间

vvppvyoh1#

您已经将 flex 设置为#header，但所有对齐的元素都在您的.container中。将flex-properties转移或添加到.container就足够了。

* {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f9f9f9;
  background-color: #02082c;
}

.container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 85%;
}

.logo {
  color: white;
  text-decoration: none;
}

.navbar {
  list-style: none;
  display: flex;
  gap: 20px;
}

.navbar .nav-item {
  font-weight: 600;
  font-size: 18px;
}

<section id="header">
  <div class="container">
    <div class="brand">
      <h1><a href="#" class="logo">GOLD</a></h1>
    </div>
    <ul class="navbar">
      <li class="nav-list"><a href="#" class="nav-item">Home</a></li>
      <li class="nav-list"><a href="#" class="nav-item">About Us</a></li>
      <li class="nav-list"><a href="#" class="nav-item">Services</a></li>
      <li class="nav-list"><a href="#" class="nav-item">Contact Us</a></li>
    </ul>
  </div>
</section>

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

我来回答

css 导航栏位于顶部水平右侧

1条答案

相关问题

热门标签

最新问答