时间戳

首页 > 解决方案 > 为什么导航栏导航链接不在属性之间的弹性框空间的中心

html - 为什么导航栏导航链接不在属性之间的弹性框空间的中心

问题描述

我在属性之间使用 flexbox 空间来使导航栏的导航链接在中心但是，它们并不完全在中心，我认为这是因为登录和注册按钮，当只有一个注册按钮时导航链接正好在中心。

导航条码：

body,
html {
  height: 100%;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
li, a, button {
  font-family: "Montserrat",sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

.logo {
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  color: goldenrod;
  font-size: 22px;
  order: 1;
}

nav {
  order: 2;
}

.btn_group {
  order: 3;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10%;
  background-color: #24252A;
  position: fixed;
  top: 0;
  width: 100%;
}

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

.nav_links li {
  display: inline-block;
  padding: 0px 20px
}

.nav_links li a {
  transition: all 0.3s ease 0s;
}

.nav_links li a:hover {
  color: #ddad34;
}

.LogInButton {
  padding: 9px 25px;
  background-color: #24252A;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  border-radius: 50px;
}

.SignUpButton {
  padding: 9px 25px;
  background-color: goldenrod;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  border: none;
  border-radius: 50px;
}

button: hover {
  background-color: #ddad34;
}
<header>
  <p class="logo">Hotel LA</p>
  <nav>
    <ul class="nav_links">
      <li><a href="WebForm1.aspx">About</a></li>
      <li><a href="WebForm2.aspx">Orders</a></li>
      <li><a href="WebForm3.aspx">Contact Us</a></li>
    </ul>
  </nav>
  <div class="btn_group">
    <a href="Login.aspx"><button class="LogInButton">Log In</button></a>
    <a href="Registration.aspx"><button class="SignUpButton">Registration</button></a>
  </div>
</header>

非常感谢

标签： htmlcss

解决方案

为每个组件创建table一行六列，并对每列应用不同的填充，直到获得中间的字段

推荐阅读