Question

缺少什么使我的主菜单不居中或与徽标对齐？我一直反复重复同样的错误。我还在学习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>

Answer 1

使用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>

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

1 个答案: