導航之間的空間

如何製作漂亮的頁眉/導航欄目？導航之間的空間

這是我的代碼：

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

導航之間的空間

回答

相關問題