Space 导航之间

Question

如何制作漂亮的 header/nav 版块？

这是我的代码：

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 的认识。所以我开始使用导航和 header 函数。

Answer 1

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

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

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

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>

Space 导航之间

Space Between Nav

html

css

nav