Question

我正试图将一个小图标的水平列表居中。对于熟悉Launchrock的人来说，用户可以自定义所有代码。注意我看不到他们的任何标准CSS，但我们可以覆盖他们所有的CSS。

<div class="LR-site-connect">
    <ul class="LR-connect-share-links LR-clearfix">
        <li><a href="#" class="LR-connect-icon connect-rss" title="rss"></a></li>
        <li><a href="#" class="LR-connect-icon connect-github" title="github"></a></li>
        <li><a href="#" class="LR-connect-icon connect-pinterest" title="pinterest"></a></li>
        <li><a href="#" class="LR-connect-icon connect-youtube" title="youtube"></a></li>
    </ul>
</div>

Answer 1

假设您的图标宽度为16px，并且您希望布局为：

[      [ ] [ ] [ ] [ ]      ]

您可以尝试以下操作：

.LR-connect-share-links { width: 94px; margin: 0 auto; overflow: hidden; }
.LR-connect-share-links > li { float: left; width: 16px; margin-right: 10px; }
.LR-connect-share-links > li:last-child { margin-right: 0; }

将一些!important添加到需要覆盖的属性中，您应该有一个可行的解决方案。

Answer 2

你可以用它来覆盖任何css并坚持居中：

margin:0 auto !important;

如何在div类中列出项目（ul li）？

2 个答案: