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; }。原因是您在页面li上创建了所有inline-block元素 - 而不仅仅是导航中的元素。

Blogger的评论搞砸了我的CSS

1 个答案: