css - 图像翻转列表不起作用

Question

我的社交图标有 3 个图像翻转。这是HTML：

<ul class="social">
    <li><a class="html5" href="#html5"></a></li>
    <li><a class="twitter" href="#twitter"></a></li>
    <li><a class="facebook" href="#facebook"></a></li>
</ul>

CSS：

ul.social {
    list-style-type:none;
    margin:0;
    padding:0;
}

li.social {
    display:inline;
}

翻转功能正常，只是内联导航（ul="social"）失败并且仅垂直显示。我究竟做错了什么？

Answer 1

你正在使用li.social，但你需要.social li。您还需要更改display: inline为display: inline-block.