如何水平对齐居中的ul [重复]答案

【问题标题】：how to horizontally align a centered ul [duplicate]如何水平对齐居中的ul [重复]
【发布时间】：2021-05-19 23:06:30
【问题描述】：

我有一个以屏幕为中心的ul，但列表项垂直显示为 1 x 1，我希望它们水平显示。这是代码：

<nav style="margin: 0; padding: 0; text-align: center;">
    <ul style="list-style: none; display: inline;">
        <li><a href=""> obj1</a></li>
        <li><a href=""> obj2</a></li>
        <li><a href=""> obj3</a></li>
        <li><a href=""> obj4</a></li>
        <li><a href=""> obj5</a></li>
        <div style="clear: both;"></div>
    </ul>
</nav>

【问题讨论】：

标签： html css navigation alignment html-lists

【解决方案1】：

您可以简单地对您的 ul 执行 display: flex 和 flex-direction: row 即可

<nav style="margin: 0; padding: 0; text-align: center;">
    <ul style="list-style: none; display: flex; flex-direction: row">
        <li><a href=""> obj1</a></li>
        <li><a href=""> obj2</a></li>
        <li><a href=""> obj3</a></li>
        <li><a href=""> obj4</a></li>
        <li><a href=""> obj5</a></li>
        <div style="clear: both;"></div>
    </ul>
</nav>

【讨论】：

我试过了，项目水平显示，但它们不再居中并且它们之间没有空格。

【解决方案2】：

您可以通过将display: inline 直接应用于列表项来水平显示列表项。这是它的 CSS：

li {
    display: inline;
}

【讨论】：

【解决方案3】：

改变显示：内联；显示：inline-flex;

【讨论】：