添加徽标时导航栏无法正确显示

我似乎碰到了一些奇怪的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

添加徽标时导航栏无法正确显示

回答

相关问题