HTML / CSS中心NavBar <ul>

Question

我想知道如何将导航栏放在中心位置。我正在使用display: inline-block;，但它似乎无济于事。我试着寻找填充问题，但没有运气。不知怎的，它离左边太远了。

.main {
  text-align: center;
  display: inline-block;
}

#navbar {
  width: 100%;
  height: 40px;
  background: #2e2e2e;
  color: #bbb;
  font-weight: bold;
}

#navbar ul {
  list-style-type: none;
}

#navbar ul a {
  color: #bbb;
  padding: 0 10px;
  display: inline-block;
}

#navbar ul li {
  float: button;
  margin: 5px;
  font-size: 18px;
}

#navbar ul li:hover {
  border-bottom: 3px solid #00939C;
  color: white;
  transition: 0.5s;
}

<nav id="navbar" class="main">
  <ul id=ul_navbar>
    <a href="#">
      <li>Domov</li>
    </a>
    <a href="#">
      <li><del>Preklady</del></li>
    </a>
    <a href="#">
      <li><del>Chat</del></li>
    </a>
    <a href="#">
      <li><del>O nás</del></li>
    </a>
    <a href="#">
      <li><del>F.A.Q.</del></li>
    </a>
    <a href="#">
      <li><del>Podporte nás</del></li>
    </a>
  </ul>
</nav>

Answer 1

要达到预期效果，请使用以下选项

  #navbar ul {
    list-style-type: none;
    margin:0px;
    padding:0px;
}

Codepen- https://codepen.io/nagasai/pen/pwExdX

Answer 2

正如评论中所指出的，您的HTML和CSS都是无效的。你应该看看修复它们，但这不是导致你的问题的原因。

不平衡是由ul上的默认填充引起的 - 如果您使用

#navbar ul {
  list-style-type: none;
  padding-left: 0;
}

它会帮助你。