Question

我有一个导航栏，我无法水平居中。我有一个nav标签，里面有一个ul标签和一个li标签，然后某些li标签有ul和li来创建下拉列表。我无法使导航位于页面的中心位置？

/* Main Header Menu */

.header-menu-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.headermenu {
  padding: 0 10% 0 10%;
  overflow: hidden;
}

.headermenu>ul>li>a {
  display: inline-block;
  text-align: center;
}

.headermenu>ul {
  padding-left: 0;
}

.headermenu>ul>li {
  float: left;
  position: relative;
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en-gb">

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <title>Complete Suites</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">
  <div class="header-menu-wrap">
    <nav class="headermenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">ON SALE</a></li>
        <li><a href="#">Suites</a></li>
        <li><a href="#">Baths</a></li>
      </ul>
    </nav>
  </div>
</body>

</html>

请指出任何可能有助于解决我的问题的方法，当我尝试了解为什么仅移动/居中元素的原因时，请进行解释。

谢谢詹姆斯

编辑：

更改了代码，仅显示我要询问的问题。

Answer 1

删除float: left;

.headermenu>ul>li {
  position: relative;
  display: inline-block;
}

由于您已经在使用display: inline-block，因此不需要它会导致问题。有关display: inline-block和float的详细信息以及它们之间的区别，请参见以下答案以供参考：Advantages of using display:inline-block vs float:left in CSS

.header-menu-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.headermenu {
  padding: 0 10% 0 10%;
  overflow: hidden;
}

.headermenu>ul>li>a {
  display: inline-block;
  text-align: center;
}

.headermenu>ul {
  padding-left: 0;
}

.headermenu>ul>li {
  position: relative;
  display: inline-block;
}

<div class="header-menu-wrap">
    <nav class="headermenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">ON SALE</a></li>
        <li><a href="#">Suites</a></li>
        <li><a href="#">Baths</a></li>
      </ul>
    </nav>
  </div>

Answer 2

您的导航已经居中。但是，如果要将居中ul元素居中，则应将每个ul的宽度设置为33％，并将居中ul文本设置为居中对齐

Answer 3

尝试一下

.header-menu-wrap {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.headermenu {
  padding: 0 10% 0 10%;
  overflow: hidden;
}

.headermenu>ul>li>a {
  padding: 0 10px;
}

.headermenu>ul>li {
  position: relative;
  display: inline-block;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <title>Complete Suites</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">
  <div class="header-menu-wrap">
    <nav class="headermenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">ON SALE</a></li>
        <li><a href="#">Suites</a></li>
        <li><a href="#">Baths</a></li>
      </ul>
    </nav>
  </div>
</body>

如何在带有下拉菜单的导航栏中将列表居中？

3 个答案: