我无法弄清楚如何中心我的导航栏在CSS

问题描述 投票：-3回答：3

任何帮助非常感谢，谢谢！

Here is my html code

<!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编辑从截图中添加代码 - 我相信第三截图结合的代码和标题为这一问题的足够信息。

html css web formatting nav
3个回答
0
投票

第一关：请把你的代码在你的问题，而不是在一个屏幕截图，这使得它更容易，如果人们需要复制和测试。

其次，它并不像你试过在所有中心什么。您的导航栏被floating的权利，并具有一个600px的意思margin-right它会留600px的远离窗口的右侧。

尝试添加此：

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

而不是你的style.css目前。主要-导航条目。保持style.css中的其余部分原样。

0
投票

在你连接的图片越来越近看后，我下面写的代码。希望这可以帮助你。

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

从。主要-NAV权{}：也请删除浮动

0
投票

这里有些事情：

  1. 不要忘记关闭您的股利和UL标签！
  2. 添加此为.row： .row {显示：-webkit-FLEX;显示：弯曲; -webkit-FLEX-方向：行;挠曲方向：行; -webkit-证明内容：中心;证明内容：中心;对齐含量：拉伸; }

它可以与孩子们在容器中居中的.row作为在你的页面的容器。

  1. 用以下内容替换你的。主要-NAV {}： 。主要-NAV {列表样式：无;边距：30像素; }

通过去除浮体和利润率左您允许显示：弯曲来完成其工作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.