Question

我很难在引导程序中处理UL LI项目。我正在尝试对齐它们，以便彼此相邻（水平），而不是垂直对齐。这是我的好家伙：

<div class="container-fluid" style="margin-bottom:45px;">
        <div class="row text-center">
            <div class="col-lg-12">
                <h4 class="text-center">FOLLOW US</h4>
                <hr style="width:60%">
            </div>
        </div>
        <div class="row ">
            <div class="col-lg-12 d-flex justify-content-around" id="socialMedia">
                <ul style="list-style:none;">
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fab fa-yelp"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

但是我无法使其水平对齐。我试图将CSS应用于#socialMedia，例如Float：left，display：inline，但无法正常工作。

现在它们位于死角，这就是我希望他们留下的方式。

有人有什么主意吗？

Answer 1

使用d-inline类...

<ul class="list-unstyled">
    <li class="d-inline"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-instagram"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-yelp"></i></a></li>
</ul>

https://www.codeply.com/go/DaDD3njGFz

Answer 2

您说您将浮点数应用于#socialMedia，但这就是ul。您必须在float: left上应用li。将float: left添加到#socialMedia li。

（如果仍然不起作用，则必须确保具有足够的特异性以覆盖Bootstrap。最后一招，请添加!important）。

在引导行中显示“内联” UL LI项目

2 个答案: