导航栏 - 主菜单列表无法居中 - 我总是缺少什么？

debugcn 发表于 Dev

约翰·里奇瓦尔德

缺少什么使我的主菜单不居中或与徽标对齐？我一直在一遍又一遍地重复同样的错误。我还在学习HTML。请帮忙。

我无法在此处复制整个代码，因此请查看 GitHub。https://github.com/johnrichtvald/practice/blob/master/1.html

body {
  margin: 0;
}

#header {
  width: 100%;
  height: 100px;
  background-color: aqua;
}

#header .logoko {
  border: none;
  width: auto;
  height: 80px;
  margin: 10px;
}

#header a {
  color: black;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

#header ul li {
  list-style-type: none;
  margin: 5px;
  background-color: darkgreen;
  line-height: 100px;
  vertical-align: top;
  display: inline-block;
}

#header #menu,
#header #menu-right {
  margin: 0;
  padding: 0;
  display: inline-block;
}

#header #menu-right {
  float: right;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>decoded</title>
</head>

<body>
  <div id="header">
    <a href="#">
      <img class="logoko" src="/images/logo.png" alt="Logo">
    </a>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <ul id="menu-right">
      <li><a href="#">Register</a></li>
      <li><a href="#">Login</a></li>
    </ul>

  </div>

</body>

</html>

利夫尼马尔卡

使用display:flex到#header，ul

而是float:right使用margin-left:auto以#header #menu-right

body {
  margin: 0;
}

#header {
  width: 100%;
  height: 100px;
  background-color: aqua;
  display: flex;
}

#header .logoko {
  border: none;
  width: auto;
  height: 80px;
  margin: 10px;
}

#header a {
  color: black;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

#header ul li {
  list-style-type: none;
  margin: 5px;
  background-color: darkgreen;
  line-height: 100px;
  vertical-align: top;
  display: flex;
}

#header #menu,
#header #menu-right {
  margin: 0;
  padding: 0;
  display: flex;
}

#header #menu-right {
  margin-left: auto;
}

<div id="header">
  <a href="#">
    <img class="logoko" src="https://i.stack.imgur.com/XG0gL.png" alt="Logo">
  </a>

  <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <ul id="menu-right">
    <li><a href="#">Register</a></li>
    <li><a href="#">Login</a></li>
  </ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。