HTML/CSS - 導航

-2

因此，我想創建一個導航欄，就像我們目前在大多數網站上看到的一樣。看起來如何：1箇中間區域，有2個間距（左側和右側）。然後，您會看到「中間區域」左側的徽標和右側的導航。但我不知道如何做到這一點。有人可以幫我設置網格嗎？HTML/CSS - 導航

非常感謝！

來源

2017-02-12 Gilles

你可能想要做這樣的事情https://jsfiddle.net/link2pk/7uqvpc60/1/ – link2pk

@ link2pk是的！非常感謝！當我想要將包裝物放在相同的輪廓上時？ – Gilles

你可以在一個div或節或身體包裝導航像https://jsfiddle.net/link2pk/7uqvpc60/2/ – link2pk

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
} 
 

 
.main-nav { 
 
    background-color: #ffe; 
 
    padding: 10px 0; 
 
} 
 

 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
.main-nav ul { 
 
    float: right; 
 
}

<body> 
 
    <nav class="main-nav"> 
 
    <div class="container"> 
 
     <a href="">Logo</a> 
 
     <ul> 
 
     <li>about</li> 
 
     <li>team</li> 
 
     <li>countact us</li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    <section> 
 
    <div class="container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto possimus aspernatur atque, dolorum, alias aliquam animi et omnis non dolor cupiditate nostrum minus, error voluptatem, ab cum dicta repudiandae sequi.</p> 
 
    </div> 
 

 
    </section> 
 
</body>

來源

2017-02-12 11:49:01 link2pk

HTML/CSS - 導航

回答

相關問題