导航之间的空间

如何制作漂亮的页眉/导航栏目？导航之间的空间

这是我的代码：

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中的承认。所以我开始使用nav和header函数。

来源

2017-02-11 Gilles

引导导航栏做同样的事情，他们也响应移动视图。你可以在http://v4-alpha.getbootstrap.com/components/navbar/ –

查看它们，这很有帮助，但我想探索HTML5世界。我不喜欢复制东西等。有没有另一种方式，而不是Bootstrap？ – Gilles

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

要开始使用它，请将display:flex添加到您的<ul>。然后它的内部物品可以通过柔性容器（<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>

来源

2017-02-11 10:46:36

非常感谢！ – Gilles

导航之间的空间

回答

相关问题