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

Question

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

好的，现在我创建了一个导航栏 - 由 4 个导航元素组成 - 我想将其居中。我试图在我的 nav ul-选择器中使用 text-align: center 来完成它，但它没有正确居中。左边好像space比右边多

这是一张图片，您可以明白我的意思：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 rule, and media queries，这就是真正的响应式网站的创建方式。

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

Nav bar not centered properly (HTML/CSS)

html

css

centering

navbar