Question

非常感谢您的帮助！

<!DOCTYPE html>
<html>
<head>
  <title>Elliott Lambert</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <header>
      <div class="row">
        <ul class="main-nav">
          <li class="active"><a href="">HOME</a></li>
          <li><a href="">ABOUT</a></li>
          <li><a href="">EXPERIENCE</a></li>
          <li><a href="">ACKNOWLEDGEMENTS</a></li>
          <li><a href="">CONTACT</a></li>
          <li><a href="">FAQs</a></li>
        </ul>
      </div>
  </header>

</body>
</html>

Here is my css code

.main-nav
{
  float: right;
  list-style: none;
  margin-top: 30px;
  margin-right: 600px;
}

.main-nav li
{
  display: inline-block;
  list-style-type: none;
  text-align: center;
}

.main-nav li a
{
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 5px 20px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
}

Here is what my index.html looks like now

@jvdmr经过编辑，可以从屏幕截图中添加代码-我相信第三个屏幕截图结合了代码和标题，可以为该问题提供足够的信息。

Answer 1

仔细查看您所附的图片后，我写了下面的代码。希望对您有帮助。

.row{text-align:center; width:100%; display:inline-block;}

并且还请从 .main-nav {}

中删除 float：right

Answer 2

这里有些事

别忘了关闭div和ul标签！
为此添加.row：

.row { 显示：-webkit-flex; 显示：flex; -webkit-flex-direction：行； flex-direction：行； -webkit-justify-content：中心；证明内容：中心； align-content：拉伸； }

这使您的.row可以在整个页面中充当容器，而子代位于容器的中心。

将.main-nav {}替换为以下内容：

.main-nav { list-style：无；边距顶部：30像素; }

通过除去浮点数和左边距，可以使display：flex发挥作用。

Answer 3

首先，请在您的问题中输入代码，而不是在屏幕截图中输入代码，这样便于人们在需要时进行复制和测试。

第二，看起来您根本没有试图将任何内容居中。导航栏位于float的右侧，并且margin-right为600px，这意味着它将与窗口右侧保持600px的距离。

尝试添加此内容：

.main-nav {
  margin: 30px auto auto;
  list-type: none;
  width: intrinsic;
}

代替style.css中的当前.main-nav条目。保持其余的style.css。

我无法弄清楚如何将导航栏居中于CSS

3 个答案: