Question

我正在试图弄清楚如何将整个<ul>元素重新定位到屏幕的中心，但每次我尝试一种新方法时，下拉项目都会因为轻微转移到对，或者他们彼此叠加。

有人能伸出援助之手，让我知道我做错了什么，并给我一些提示，让它更容易一些吗？

以下是我正在使用的内容。

html,
body {
  margin: 0px;
  padding: 0px;
}

.menu ul {
  /*This is blank because nothing I tried works*/
}

ul {
  list-style: none;
  font-family: cursive;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  display: block;
  height: 50px;
  width: 200px;
  background-color: lightgray;
}

ul li a {
  display: block;
  color: black;
  text-decoration: none;
  line-height: 50px;
  text-align: center;
}

ul li a:hover {
  background-color: lightblue;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Test</title>
</head>

<body>
  <div class="menu">
    <ul>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</body>

</html>

Answer 1

ul {
  display: flex;
  justify-content: center;
}

将此代码添加到您的UL标记中，它应该以整个内容为中心

如何使我的下拉导航菜单居中？

1 个答案: