在HTML項目的導航欄中編碼徽標的問題

我是HTML和CSS的新手，嘗試構建主頁。在HTML項目的導航欄中編碼徽標的問題

我已經在導航欄的徽標中進行了編碼，但這樣做對HOME頁面的href已被歪斜。

請看截圖。

這是因爲我沒有在div中編碼或編程一個clearfix？

我可以得到如何解決這個問題的幫助，所以美學看起來很合適。

我的HTML

<div class="nav-container"> 
    <nav class="container"> 
     <ul> 
     <a href="#" class="pull-left"><img src="images/kphr.png" alt="KPHR"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about.html">About KPHR Solutions</a></li> 
     <li><a href="clients.html">Clients</a></li> 
     <li><a href="candidates.html">Candidates</a></li> 
     <li><a href="contactus.html">Contact Us</a></li> 
     </ul> 
     <div class="clear"></div> 
    </nav> 
    </div>

我的CSS

a.btn { 
    margin: 0 1em; 
} 



/* Box Model Hack */ 
* { 
    -moz-box-sizing: border-box; /* Firexfox */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */ 
    box-sizing: border-box; /* IE */ 
} 

.clear { 
    clear: both; 
} 



    .nav-container { 
     background: rgba(0,0,0,0.8); 
    } 

    .navbar-inner { background: } 

    nav ul { padding-left: 0; } 

    nav ul li { float: left; list-style: none; font-size: 20px; } 

    nav ul li a { color: white; margin: 18px; padding: 18px; display: block; } 

    nav ul li a:hover { color: #ff3300; transition: color 0.7s ease-in; }

來源

2016-02-16 Chris Dormani

你還可以發佈CSS請... –

使用@ ADreNaLiNe-DJ回答，你可以在這裏看到，沒有更多的問題https://jsfiddle.net/silviagreen/b7001tgy/ – silviagreen

不要忘了跑你的代碼通過像這樣的驗證器：https：//validator.w3.org/它會在你的代碼中發現許多問題。 –

您的圖片是不是在裏標記和a標記未關閉。這裏是工作代碼：

<div class="nav-container"> 
    <nav class="container"> 
     <ul> 
     <li><a href="#" class="pull-left"><img src="images/kphr.png" alt="KPHR"></a></li> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about.html">About KPHR Solutions</a></li> 
     <li><a href="clients.html">Clients</a></li> 
     <li><a href="candidates.html">Candidates</a></li> 
     <li><a href="contactus.html">Contact Us</a></li> 
     </ul> 
     <div class="clear"></div> 
    </nav> 
    </div>

爲了避免增加導航欄的大小，因爲填充和利潤率在包含標誌裏的，你應該增加這個CSS：

nav ul li a.pull-left { margin: 0; padding: 0; display: block; }

調整利潤率和填充以得到您想要的結果。

來源

2016-02-16 10:21:01

謝謝。他們是否需要進一步干預css –

我不這麼認爲。也許你應該發佈你的CSS內容，以確保所有項目垂直對齊_middle_ –

我會親自將標識與導航列表分開標記，因爲它在技術上不是同一列表的一部分，並且是與導航完全分離的實體。這也意味着如果有響應，移動導航或完全隱藏導航會更容易，而不會影響徽標。 – Doidgey

在HTML項目的導航欄中編碼徽標的問題

回答

相關問題