Question

我在这里有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>

非常感谢任何帮助

Answer 1

将list-style:none;添加到ul.social-media li类

Answer 2

我不太了解你的问题，所以我的理解 - 请使用margin-top: 0px; CSS尝试ul.social-media。

试试这个 -

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

您可以看到Chrome Development Tool，<ul>通过margin-top: 16px;继承的风格。因此，您需要为此工作设置margin-top: 0px;

Answer 3

更新：我明白了。你似乎没有删除ul的子弹。那个问题。

list-style-type: none;

所以这个

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

Css列表问题，在我的列表顶部？

3 个答案: