HTML / CSS：导航元素中的无序列表略微向右偏移[重复]

Posted 2023-03-06

【中文标题】HTML / CSS：导航元素中的无序列表略微向右偏移[重复]

【英文标题】：HTML/CSS: unordered list in nav element slightly offset right [duplicate]

【发布时间】：2020-06-09 05:49:54

【问题描述】：

我最近制作了一个内容居中的导航栏，其中包含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中补零，见下文）。

【参考方案1】：

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

从ul 和padding: 0; 中删除默认填充。

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;
    padding: 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>

【参考方案2】：

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

ul 
    padding: 0;

Zero-padding fixes nav bar