将margintop或bottom添加到列表项

Question

我有一个包含文本和两个图标图像的列表。文本与图像不对齐，因此我希望能够为链接添加边距。但是，经过至少一个小时的检查，我仍然无法让它工作，这是我的代码：

<div class="company-info pull-right">



                    <ul class="social-header">

                    <li>Follow Us</li>
                    <li class="socials"><a href="#" title="follow us on twitter"><i class="twit-icon"></i></a></li>
                    <li class="socials"><a href="#" title="Folow us on LinkedIn"><i class="linked-icon"></i></a></li>


                    </ul><!--/social header-->

            </div><!--/pull right-->


        </div><!--/company info-->

    .social-header{
    list-style:none;
}

.social-header li{
    display:inline;
}

.social-header li.socials{
    margin-top:10px;
}

Answer 1

margin不会对内联元素起作用。

.social-header li{
    display:inline-block;
    float: left;
}



.social-header li.socials{
    padding-top:10px;
}

Answer 2

您正在使用display:inline，请将其更改为display:inline-block。

这是因为内联元素不能有任何大小，填充等。可以将它们想象成段落中的字母。

Answer 3

我建议您查看vertical-align property及其选项，看看其中一个是否可以解决问题。我经常使用vertical-align: middle。

Answer 4

我没有你的图像文件，但我只是在谷歌上抓了一些并添加了我自己的img CSS类。关键是将其更改为内联块并使用vertical-align属性。 CSS类如下

.social-header{
    list-style:none;
}

.social-header li{
    display:inline-block;
}

.social-header li{
    vertical-align: middle;
}

img{
    width: 45px;
    height: 45px;
}

和html

<div class="company-info pull-right">
    <ul class="social-header">
        <li><h2>Follow Us</h2></li>
        <li class="socials"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png" /></li>
        <li class="socials"><img src="http://inhouseww.com/static/assets/imgs/icon-linkedin.png" /></li>
     </ul>
</div>