以无序列表为中心

Question

我试图使用CSS将没有子弹点的无序列表居中。无论我尝试过什么，列表都集中在内，包括要点。

当我尝试将列表集中在一起时，即使你看不到它们仍然被包括在内。

.nav ul {
  margin: auto;
  text-align: center;
  border: 2px red solid;
  list-style-type: none;
}
.nav li {
  color: white;
  text-transform: uppercase;
  padding: 0 15px;
  margin: auto;
  list-style-type: none;
}

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Gallery</li>
  <li>Contact
    <li>
</ul>

Answer 1

HTML有序和无序列表通常具有默认填充或缩进余量。这包含在浏览器的默认样式表中。

某些浏览器会应用padding-left。其他人使用margin-left。

W3C建议margin-left: 40px（source）。

当您将HTML列表居中时，左侧边距/边距将与内容一起居中，将内容定位在中心右侧。

试试这个：

ul { margin-left: 0; padding-left: 0; }

Answer 2

你走了！

HTML

<div class="nav">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Gallery</li>
    <li>Contact
      <li>
  </ul>
</div>

CSS

.nav ul {
  text-align: center;
  border: 2px red solid;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  color: white;
  text-transform: uppercase;
}