0

我在这里有这个网站http://jamessuske.com/freelance/seasons/

在底部，您将看到一个社交媒体列表，但正如您所看到的，它看起来很乱，而且看起来好像有什么东西在上面。我不明白我做错了什么。

这是我的CSS：

ul.social-media{
    margin-left:20px;
    padding-top:30px;
}

ul.social-media li{
    float:left;
    padding-left:5px;
}

ul.social-media li.twitter{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:0px;
    width:25px;
    height:26px;
}

ul.social-media li.instagram{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:-26px;
    width:25px;
    height:26px;
}

ul.social-media li.facebook{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:-52px;
    width:25px;
    height:26px;
}

和 HTML：

<ul class="social-media">
<li class="twitter"><a href="#">&nbsp;</a></li>
<li class="instagram"><a href="#">&nbsp;</a></li>
<li class="facebook"><a href="#">&nbsp;</a></li>
</ul>

任何帮助将非常感激

4

3 回答 3

2

添加list-style:none;到ul.social-media li课堂

于 2013-07-20T05:15:18.643 回答
0

我不太了解您的问题，所以据我所知 - 请尝试margin-top: 0px;使用您的ul.social-mediaCSS。

试试这个 -

ul.social-media{
  display: inline-block;
  margin-top: 0px;
  padding-top:30px;
}

您可以看到Chrome Development Tool，您<ul>采用margin-top: 16px;继承的风格。所以你需要margin-top: 0px;为这项工作设置

于 2013-07-20T05:21:13.103 回答
0

更新：我明白了。看来您没有删除 ul 的子弹。 那个问题。

list-style-type: none;

所以这

ul.social-media {
margin-left: 20px;
padding-top: 30px;
list-style-type: none;
}
于 2013-07-20T05:26:29.850 回答