导航栏未正确居中（HTML / CSS）

Question

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

好了，现在我创建了一个导航栏-包含4个导航元素-我想将其居中。 我尝试使用text-align: center在我的nav ul -selector中居中，但它无法正确居中。 左侧似乎比右侧更多。

这是一张图片，您可以明白我的意思： 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;
}

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

Answer 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规则和媒体查询 ，这就是创建真正的响应式网站的方式。