为什么我的 <a> 元素不在我的 <li> 导航元素中居中？答案

【问题标题】：Why aren't my <a> elements centered within my <li> navigation elements?为什么我的 <a> 元素不在我的 <li> 导航元素中居中？
【发布时间】：2014-12-12 10:59:44
【问题描述】：

我正在使用移动优先的方法创建一个网站。我目前正在设计导航栏的样式，它由一个ul 和五个li 元素和一个a 元素组成，每个li 中都有一个a 元素。对于移动布局，我希望导航完全居中。 nav 元素和li 元素似乎完全居中；但是，a 元素不在每个li 中居中...它们向右倾斜。我该如何纠正这个问题？

这是我的 HTML：

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="programs.html">Programs</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="why.html">Why</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</nav>

这是我的 CSS：

nav {
    width: 15%;
    margin: 0 auto;
    padding-top: 0.5em;
}

nav ul {
     list-style-type: none;
}

nav li {
    max-width: 100%;
    margin: 1em;
    text-align: center;
    border-radius: 10px;
}

nav a {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    padding: 0.5em;
    color: inherit;
    text-decoration: none;
}

这是nav 当前在浏览器 (Chrome) 中的样子：

【问题讨论】：

您能否提供一个 JSfiddle 来重新创建您的问题图像，以便社区可以更好地为您提供帮助？
尝试从 li 和 a 中删除 width: 100%。
可能是标签a的边距，试试margin: 0和text-aling: center
@ChetanSastry 成功了！谢谢！
我认为您缺少提供一些导致此问题的 CSS 信息。如前所述，提供 JSFiddle 会有所帮助，但我怀疑这可能是默认浏览器样式的问题。你在使用 Normalize.css 之类的东西吗？ nicolasgallagher.com/about-normalize-css您正在使用 Chrome，因此请按“F12”并使用 Chrome 开发人员工具选择元素并检查 CSS 样式以找出导致额外样式的原因。

标签： html css html-lists centering nav

【解决方案1】：

将li的margin和padding设置为0；

【讨论】：

【解决方案2】：

试试这个：

nav ul {
    display: block;
    overflow: hidden;
    padding: 0px;
    list-style-type: none;
  }

nav a {
     display: block;
     width: 100%;
     margin: 0 auto;
     color: inherit;
     text-decoration: none;
     overflow: hidden;
     }

并且在标签上使用 max-width 而不是简单的宽度

【讨论】：

【解决方案3】：

将以下内联或外部样式表添加到nav a

margin: 0px;
text-align: center;

【讨论】：