导航栏未正确居中 (HTML/CSS)答案

【问题标题】：Nav bar not centered properly (HTML/CSS)导航栏未正确居中 (HTML/CSS)
【发布时间】：2015-06-16 17:31:42
【问题描述】：

我是一个尝试建立我的第一个网站的初学者。我希望它从一开始就响应，所以我不想有一个固定的宽度。

好的，现在我创建了一个导航栏 - 由 4 个导航元素组成 - 我想要居中。我尝试在我的nav ul-selector 中使用text-align: center 执行此操作，但它没有正确居中。左侧的空间似乎比右侧大。

这是一张图片，你可以明白我的意思：http://i.stack.imgur.com/o5ajc.jpg

这是 HTML 代码：

<body>
 <div id="wrapper">
   <header>
   <h1>This is my website</h1>
   <nav>
    <ul>
      <li><a href="#">Text</a></li>
      <li><a href="#">Image</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  </header>
</div>

这是 CSS 代码：

header {
  font-family: 'montserrat', 'helvetica', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

header h1 {
  border-bottom: 1px solid #000;
  color: #fe2859;
  font-size: 2.7em;
  letter-spacing: 0.0625em;
  text-align: center;
}

/* Here comes the important part: */

nav ul {
  list-style: none;
  /* I want everything inside the nav bar centered, thus: */
  text-align: center;
}

nav li {
  /* I want the li-elements side by side instead of a vertical list, thus: */
  display: inline;
  padding: 10px;
}

nav li a {
  text-decoration: none;
  color: #fe2859;
  font-size: 1.3em;
}

你能告诉我错误在哪里吗？

【问题讨论】：

标签： html css navbar centering

【解决方案1】：

您的<ul> 元素很可能具有来自浏览器样式表的一些内置填充。这会使内容稍微向右移动。

尝试添加：

nav ul {
  padding: 0; /* Remove the default padding. */
  list-style: none;
  /* I want everything inside the nav bar centered, thus: */
  text-align: center;
}

如果您刚刚开始，您应该尝试尽快熟悉您的开发人员工具。您可以通过查看计算的样式或仅使用检查器突出显示页面上的元素来快速解决这些问题。

奖励答案：响应式布局不能具有固定宽度的概念是一个谬误。看看@media 规则和media queries，这就是真正的响应式网站的创建方式。

【讨论】：