博客評論是從我的CSS搞砸了

Question

我是一名主修計算機科學和網絡開發的大學生，所以我仍然在學習一切。

我的一位客戶有一位博主，她問我是否可以做幾件事情，比如做一個導航欄並鏈接事情等等。所以在做了導航欄之後，我發現她的評論都搞砸了。我不確定它是否是導航欄中的CSS或其他內容。

我的導航欄代碼：

<style> 
#logo-bloglovin:hover,#logo-bloglovin:active { background-position:0 -64px; } 

#logo-facebook 
{ 
background-position:-210px 0px; 
} 

#logo-facebook:hover,#logo-facebook:active { background-position:-210px -64px; } 

#logo-instraram 
{ 
background-position:-420px 0px; 
} 
#logo-instraram:hover,#logo-instraram:active { background-position:-420px -64px; } 

#logo-googleplus 
{ 
background-position:-660px 0px; 
} 

#logo-googleplus:hover,#logo-googleplus:active { background-position:-660px -64px; } 

#logo-contact 
{ 

background-position:-880px 0px; 
} 
#logo-contact:hover,#logo-contact:active { background-position:-880px -64px; } 


ul.chicnav { 
border: none !important; 
display: block; 
list-style: none; 
} 

li{ 
display: inline-block ; 
} 

ul.chicnav li a { 
width:210px; 
height:62px; 
text-decoration:none; 
display:block; 
border: none !important; 
background: url('http://i47.tinypic.com/280nmtx.png') 0 0 no-repeat; 
} 

ul.chicnav li a:hover { 
background-color: transparent !important; 
} 

</style> 

<ul class="chicnav"> 
<li><a href="http://www.bloglovin.com/blog/3798040/chic-fashion-world" id="logo-bloglovin" > </a></li> 
<li><a href="http://www.facebook.com/pages/Chic-Fashion-World/248420155275530" id="logo-facebook" > </a></li> 
<li><a href="http://instagram.com/borka12/" id="logo-instraram" > </a></li> 
<li><a href="https://plus.google.com/109438806289588533953/posts" id="logo-googleplus" > </a></li> 
<li><a href="http://chicfashionworld.blogspot.com/p/contact.html" id="logo-contact" > </a></li> 

</ul> 

的博客住在chicfashionworld.com。我在chicfashionworldtest.blogspot.com上做了一些改進的測試頁面。如果您對我有任何建議，請告訴我。

Answer 1

好吧，這裏是你的原代碼，清理了一下：

<style> 
#logo-bloglovin:hover, #logo-bloglovin:active{ background-position:0 -64px; } 

#logo-facebook{ background-position:-210px 0px; } 
#logo-facebook:hover, #logo-facebook:active{ background-position:-210px -64px; } 

#logo-instraram{ background-position:-420px 0px; } 
#logo-instraram:hover, #logo-instraram:active{ background-position:-420px -64px; } 

#logo-googleplus{ background-position:-660px 0px; } 
#logo-googleplus:hover, #logo-googleplus:active { background-position:-660px -64px; } 

#logo-contact{ background-position:-880px 0px; } 
#logo-contact:hover, #logo-contact:active{ background-position:-880px -64px; } 


ul.chicnav { 
    border: none !important; 
    display: block; 
    list-style: none; 
} 

li{ display: inline-block; } 

ul.chicnav li a { 
    width:210px; 
    height:62px; 
    text-decoration:none; 
    display:block; 
    border: none !important; 
    background: url('http://i47.tinypic.com/280nmtx.png') 0 0 no-repeat; 
} 

ul.chicnav li a:hover { background-color: transparent !important;} 
</style> 

<ul class="chicnav"> 
    <li><a href="http://www.bloglovin.com/blog/3798040/chic-fashion-world" id="logo-bloglovin" > </a></li> 
    <li><a href="http://www.facebook.com/pages/Chic-Fashion-World/248420155275530" id="logo-facebook" > </a></li> 
    <li><a href="http://instagram.com/borka12/" id="logo-instraram" > </a></li> 
    <li><a href="https://plus.google.com/109438806289588533953/posts" id="logo-googleplus" > </a></li> 
    <li><a href="http://chicfashionworld.blogspot.com/p/contact.html" id="logo-contact" > </a></li> 
</ul> 

注意，第23行？ li{ display: inline-block; }？我敢打賭，這是你的問題的原因。也許修改爲ul.chicnav li{ display: inline-block; }。原因在於您正在製作頁面inline-block上的所有li元素 - 不僅僅是導航欄中的元素。