Html 为什么不'；t我的<；a>；以我的<；李>；导航元素？

我正在使用移动优先的方法创建一个网站。我目前正在设计导航栏的样式，它由一个

ul

和五个

li

元素组成，每个

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>

以下是

nav

当前在浏览器（Chrome）中的外观图像：

---

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

导航a

margin: 0px;
text-align: center;

---

将li的

边距

和

填充

设置为0

试试这个：

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;
     }

---

并在标签上使用最大宽度而不是简单宽度

您能否提供一个JSFIDLE重新创建您的图像，以便社区能够更好地帮助您？尝试从li和a中删除宽度：100%。可能是标签的边距

a

，尝试使用

边距：0

，还有

text:center

@ChetanSastry，真管用！谢谢我认为您没有提供导致此问题的一些CSS信息。如前所述，提供JSFIDLE会有所帮助，但我怀疑这可能是默认浏览器样式的问题。您是否在使用Normalize.css之类的东西？您使用的是Chrome，所以请按“F12”并使用Chrome Developer工具选择元素并检查CSS样式，以找出导致额外样式的原因。

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;
     }