我是否在我的引導程序導航中正確使用邊距

Question

一切看起來不錯，或者至少是我希望的方式。但感覺就像我不正確地使用邊距來達到這個效果。這是最好的方法還是有更直觀的解決方案？

http://i.imgur.com/Mcme35H.jpg

<div class="navbar-header"> 
     <h1>HHHHH HHHH</h1> 
    </div> 
    <div id="header"> 
     <nav id="nav">       
     <a href="index.php">Home</a> 
     <a href="services.php">Services</a> 
     <a href="contact.php">Contact</a> 
     <a href="Request.php">Request service</a>    
     </nav> 
    </div><!--/#HEADER--> 

的CSS

.navbar-header>h1{ 
      float:left; 
      margin:10px 414px 0px 20px; 
      font-size: 38px;  
      color:#ffe; 
      transition: all 0.3s ; 
     } 

     .navbar-header>h1:hover{ 
      color:#4EB1BA; 
     } 

     #nav{ 
      margin-top: 30px; 
     } 


     #nav>a{ 
      text-decoration: none; 
      margin-left:30px; 
      margin:51px 0px 30px 30px; 
      color:#E9E9E9; 
      font-size: 16px; 
      transition: all 0.3s ease; 
     } 

     #nav>a:hover{ 
      color:#4eb1ba; 
     } 

Answer 1

我有一些建議，可以幫助清理碼多一點。可能會使未來更清晰的編碼。

我明白你是如何將margin:10px 414px 0px 20px;應用於你的<h1>標籤的。我建議您將其更改爲margin:10px 0 0 20px;，並在頁面上簡單地將float:right添加到您的#nav ID中。這將允許如果需要改變標題或應用新的字體，並且不會影響導航部分的位置。所有你需要做的就是改變你的nar的邊際到#nav { margin:30px 20px 0; }。

也許未來，您可以使用<header></header>標籤而不是id="header"。實際上的工作方式相同，但只是簡潔的代碼。

希望這有助於你出去。