HTML / CSS：导航元素中的无序列表稍微向右偏移

Question

我最近制作了一个导航栏，该导航栏的内容居中，其中包含inline列表项的无序列表（两个或三个按钮）。

nav,header {
    display: block;
    margin: 0.5rem auto;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
ul {
    list-style-position: none;
    display: block;
    margin: 0;
}
li {
    display: inline;
    margin: 0;
    padding: 0.7rem;
}

<nav>
    <ul>
        <li>
            <a class="btn" id="one" href="#">button 1</a>
        </li>
        <li>
            <a class="btn" id="two" href="#">button 2</a>
        </li>
    </ul>
</nav>

Nav bar slight misalignment to the right

内容大致居中，但向右稍微偏移。 （很容易错过，但是当列表和其上方的元素长度相似时会弹出）。我怀疑这是由于定位导致的“鬼影弹”，但我尝试将list-style-position设置为outside或none并操纵了各种页边距，填充和对齐功能，但没有运气。 （注意：解决方案是ul中的零填充，请参见下文。）>

我最近制作了一个导航栏，该导航栏的内容居中，其中包含无序列表的内联列表项（两个或三个按钮）。导航，标题{display：block;保证金：0.5rem自动; padding：...

Answer 1

ul元素具有默认的填充，可以在CSS中轻松覆盖它：

Answer 2

[如果使用浏览器调试工具检查示例的html，您将看到ul的默认左填充以绿色显示：