Nav間のスペース

どのようにいいヘッダー/ナビセクションを作れますか？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で謝辞を改善しようとしています。だから私はnavとheader関数を使って作業を始めました。

出典

2017-02-11 Gilles

ブートストラップnavbarsはまったく同じことを行うと、彼らはまた、モバイルビューのために応答します。 http://v4-alpha.getbootstrap.com/components/navbar/ –

これは参考になりますが、HTML5の世界を探求したいと思います。私は物事をコピーするのが好きではありません。ブートストラップの代わりに別の方法がありますか？ – Gilles

優れたHTML5/CSS3位置決めソリューションは、CSS Flexboxです。

これを使用するには、を<ul>に追加してください。次に、内部項目は、フレックスコンテナ（<ul>）またはフレックスチャイルド（<li>）のいずれかのプロパティを使用してさまざまな方法で配置できます。

あなたの<ul>を維持するには、あまりにも幅広く（スタックオーバーフローnavのように）私は80％の幅を設定してから、フレックスボックスを使って<nav>の内側に配置してください。

フレックスボックスは、多目的な位置決めツールです。もう少し詳しく読むことができます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

Nav間のスペース

答えて

関連する問題