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。