Question

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

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

这是一张图片，您可以看到我的意思：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规则和media queries，这就是真实的响应式网站的创建方式。

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

1 个答案: