我有一个无法水平居中的导航栏。我有一个导航标签，里面有一个 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>请指出任何可能对我的问题有帮助的事情，并且解释会很棒，因为我正在尝试了解原因以及移动/居中元素。
谢谢 詹姆斯
编辑:
更改代码以仅显示我询问的问题。
最佳答案
移除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>关于html - 如何在带有下拉菜单的导航栏中居中列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51282994/