添加徽標時導航欄無法正確顯示

我似乎碰到了一些奇怪的CSS問題，我無法讓我的導航欄正確呈現。 Facebook和Twitter部分相互碰撞，我不知道在CSS中我可以編輯它的位置。添加徽標時導航欄無法正確顯示

CSS：

ul 
{ 
list-style:none; 
list-style-type:none; 
} 

li 
{ 
list-style:none; 
list-style-type:none; 
float:left; 
} 

a 
{ 
font-family: Verdana; 
display: block; 
width: 100px; 
height: 40px; 
padding: 10px; 
text-align: center; 
color: #036; 
text-decoration: none; 
} 

a:hover 
{ 
color: #55a1c8; 
}

HTML：

<ul><li><a href=Purchase.html id="current">Purchase The Book</a></li> 
        <li><a href=About.html>About The Characters</a></li> 
        <li><a href=Games.html>Games</a></li> 
        <li><a href=LoggedIn.html>Log In</a></li> 
        <li><a href=https://www.facebook.com/AmazingAdventuresSeries target="_blank"><img src="http://www.irscstudentweb.org/~S14006548/images/logos-and-badges_f-logo_online/png/FB-f-Logo__blue_29.png" alt="Find us on Facebook"></a></li> 
        <li><a href=twitter.com/neesyboowookus target="_blank"><img src="http://www.irscstudentweb.org/~S14006548/images/Twitter_follow.png" alt="Follow us on Twitter" height=29px></a></li> 
     </ul>

有一些其他的CSS爲好，我試圖刪除其他格式，看它是否是造成問題。無論它是否存在都沒關係。這裏是一個小提琴看到的行動：http://jsfiddle.net/#&togetherjs=R7hj7mcuFU

來源

2014-10-03 shannonmac

首先，爲什麼你的網站是一個表？其次爲什麼img和div定位絕對？ – 2014-10-03 18:06:31

您是否有解決方案的建議，或者您是否會很尖刻並輸入大量問號？ – shannonmac 2014-10-03 18:09:04

是的，作爲一個建議，我會說學習一些HTML和CSS :)其次，在這裏你是修復http://jsfiddle.net/58ophaxw/ :) – 2014-10-03 18:14:02

它目前看起來不錯，但進一步增強它可以添加填充左側或右側的社會網絡圖像，你正在使用。

要獲得要顯示的白色背景，請從CSS中刪除「position：absolute」。

來源

2014-10-03 17:54:08 danmullen

twitter徽標正在運行到Facebook徽標並且看起來不是導航欄的一部分。它不包含在導航欄的白色背景中。當我使用Follow @twitter手柄標誌時，它會轉到facebook標誌下面的一個單獨行或位於facebook標誌的頂部。 – shannonmac 2014-10-03 17:56:21

看到我上面修改的答案。 – danmullen 2014-10-03 18:03:13

我會盡力做到這一點。這絕對是奇怪的，B/C我添加了一個白色背景來看看發生了什麼，我注意到即使twitter標誌是導航列表的一部分，它不是白色背景的一部分。這看起來像是一件奇怪的事情。謝謝。 – shannonmac 2014-10-03 18:10:08

添加徽標時導航欄無法正確顯示

回答

相關問題