导航之间的空间答案

【问题标题】：Space Between Nav导航之间的空间
【发布时间】：2017-02-11 10:29:11
【问题描述】：

如何制作漂亮的页眉/导航部分？

这是我的代码：

body {
   margin: 0px;
}

.container {
  width: auto;
  height: 1920px;
  background-color: #514367;
}

header {
  width: 100%;
  height: 70px;
  background-color: #647551;
  top: 0px;
}

nav ul {
  margin: 0px;
  padding: 24px 0px 5px 30px;
}

nav li {
   margin-right: 40px;
   list-style: none;
   text-decoration: none;
   display: inline;
}

nav li a {
   text-decoration: none;
}

<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Design Services</title>
   </head>
   <body>
      <div class="container">
         <!-- Menu start -->
         <header>
            <nav>
               <ul>
                  <li><a href="index.html">Home</a></li>
                  <li><a href="about/index.html">About</a></li>
                  <li><a href="portfolio/index.html">Portfolio</a></li>
                  <li><a href="contact/index.html">Contact</a></li>
               </ul>
            </nav>
         </header>
         <!-- Menu end -->
         </div>
   </body>
</html>

所以我想要什么。我希望文本在中间多一点。等等！，让我们以另一种方式告诉它。你看到上面的“StackExchange”导航栏了吗？嗯，这就是我想要的。我想要右边的文字（但在中间区域居中），然后是左边的徽标（但也在中间区域居中）。

我正在努力提高我对 HTML5 的认识。所以我开始使用导航和标题功能。

【问题讨论】：

bootstrap navbars 做同样的事情，它们也响应移动视图。你可以在v4-alpha.getbootstrap.com/components/navbar查看它们
这很有帮助，但我想探索 HTML5 世界。我不喜欢复制东西等。有没有其他方法可以代替 Bootstrap？

标签： html css nav

【解决方案1】：

一个出色的 HTML5/CSS3 定位解决方案是 CSS Flexbox。

要开始使用它，请将display:flex 添加到您的<ul>。然后，它的内部项目可以通过多种方式通过属性定位在 flex 容器（<ul>）或 flex 子项（<li>）上。

为了防止你的<ul> 和它的子级扩展太宽（就像堆栈溢出导航所做的那样），我给它设置了 80% 的宽度，然后也使用 flexbox 将它居中在 <nav> 内。

Flexbox 是一个非常通用的定位工具，您可以阅读更多关于它的信息here。

body {
   margin: 0px;
}

.container {
  width: auto;
  height: 1920px;
  background-color: #514367;
}

header {
  width: 100%;
  height: 70px;
  background-color: #647551;
  top: 0px;
}

nav {
  display:flex;
  justify-content:center;
  }

ul {
  margin:0 auto;
  width:80%;
  display:flex;
  justify-content:space-between;
  }

#logo {
  margin-right:auto;
  }
  
nav ul {
  margin: 0px;
  padding: 24px 0px 5px 30px;
}

nav li {
   margin-right: 40px;
   list-style: none;
   text-decoration: none;
   display: inline;
}

nav li a {
   text-decoration: none;
}

<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Design Services</title>
   </head>
   <body>
      <div class="container">
         <!-- Menu start -->
         <header>
            <nav>
               <ul>
                  <li id="logo"><a href="index.html">Home</a></li>
                  <li><a href="about/index.html">About</a></li>
                  <li><a href="portfolio/index.html">Portfolio</a></li>
                  <li><a href="contact/index.html">Contact</a></li>
               </ul>
            </nav>
         </header>
         <!-- Menu end -->
         </div>
   </body>
</html>

【讨论】：

非常感谢！