Question

我有一个由我的 WordPress 主题提供的社交类，如下所示，其位置为 vertically：

<div class="social">
    <ul>
        <li><a href="#"><i class="ti-facebook"></i></a></li>
        <li><a href="#"><i class="ti-twitter-alt"></i></a></li>
        <li><a href="#"><i class="ti-linkedin"></i></a></li>
        <li><a href="#"><i class="ti-pinterest"></i></a></li>
    </ul>
</div>

我正在尝试将此列表放在水平线上

display: inline!important;

但是我卡住了。有人有想法吗？

Answer 1

试试下面的 CSS。

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

<div class="social">
    <ul>
        <li><a href="#">facebook<i class="ti-facebook"></i></a></li>
        <li><a href="#">twitter<i class="ti-twitter-alt"></i></a></li>
        <li><a href="#">linkedin<i class="ti-linkedin"></i></a></li>
        <li><a href="#">pinterest<i class="ti-pinterest"></i></a></li>
    </ul>
</div>

Answer 2

试试这个：

.social ul {
  display: flex;
  flex-flow: row nowrap;
}

Html 列表：从垂直到水平

2 个答案: