如何水平并排按钮？

Question

对于某些人来说，这一定是一个非常基本的问题。我一直试图弄清楚如何让我的按钮彼此并排，而不是一个在彼此之上。 这是我的代码：

<ul>
    <center><li><a class="button-small dinner rounded3" href="dinner.html">Dinner</a></li></center>
    <center><li><a class="button-small snacks rounded3" href="snacks.html">Snacks</a></li></center>

我是初学者，但非常感谢任何帮助。谢谢你的时间

Answer 1

您可以选择使用简单的css：

ul {
    text-align: center;
}
li {
    display: inline; /* or 'inline-block' */
}

使用更正后的HTML：

<ul>
    <li><a class="button-small dinner rounded3" href="dinner.html">Dinner</a></li>
    <li><a class="button-small snacks rounded3" href="snacks.html">Snacks</a></li>
</ul>