如何内联显示元素？

Question

嗨，我有一个关于 CSS 的小问题，不知道如何解决。

在我的 WHMCS template 上，我想再实现一个元素，现在一个元素在下面的行中（获得支持）。如何解决这个问题？

这是来自该元素的 CSS：

.home-shortcuts {
margin: 0;
/*background:#25a2c7;*/
background: #5E35B1;
padding-left: 250px;
margin-top: -60px;
color: #fff
}

这是来自 header.tpl 文件的代码

<div class="col-sm-12 col-md-8">
                <ul>
                     <li>
                        <a id="btnOrderHosting" href="cart.php">
                            <i class="fa fa-headphones"></i>
                            <p>
                                Créer une radio <span>&raquo;</span>
                            </p>
                        </a>
                    </li>
                    {if $registerdomainenabled || $transferdomainenabled}
                        <li>
                            <a id="btnBuyADomain" href="domainchecker.php">
                                <i class="fa fa-globe"></i>
                                <p>
                                    {$LANG.buyadomain} <span>&raquo;</span>
                                </p>
                            </a>
                        </li>
                    {/if}
                    <li>
                        <a id="btnOrderHosting" href="cart.php">
                            <i class="fa fa-hdd-o"></i>
                            <p>
                                {$LANG.orderhosting} <span>&raquo;</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a id="btnMakePayment" href="clientarea.php">
                            <i class="fa fa-credit-card"></i>
                            <p>
                                {$LANG.makepayment} <span>&raquo;</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a id="btnGetSupport" href="submitticket.php">
                            <i class="fa fa-envelope-o"></i>
                            <p>
                                {$LANG.getsupport} <span>&raquo;</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>

如何在一行中显示所有内容的一些建议？

Answer 1

您可以看到您的 li 元素的宽度为 24%。将它们减少到 20%（100 / 5 = 20，并且您的列表中有五个项目）。就是这样。

.home-shortcuts li {
  width: 20%;
}

Answer 2

添加

.home-shortcuts{padding-left:0;}
.home-shortcuts .container{width:60%;}
.home-shortcuts li {
  width: 20%;
}

用col-md-12代替col-md-8就好了

如何内联显示元素？

How to display elements inline?

css

css-selectors

whmcs

whmcs-invoice-template