html 中的水平菜单在删除 css 中的浮动 属性 时显示错误

Question

我在 HTML 和 CSS 中构建了一个网站，现在我正在对从 Envato 购买的模板进行小的更改，header 菜单与默认情况下使用以下 CSS:

.horizontalMenu>.horizontalMenu-list {
    text-align: left;
    margin: 0 auto 0 auto;
    width: 100%;
    display: block;
    padding: 0;
}
.horizontalMenu>.horizontalMenu-list>li {
    text-align: center;
    display: block;
    padding: 0;
    margin: 0;
    float: left;
    padding: 0.45rem 0;
}

现在我想让菜单居中，所以我从 CSS 中删除了浮动 属性，现在菜单显示如下：

任何人都可以告诉我这里可能出了什么问题或如何解决它，在此先感谢

Answer 1

导航项垂直对齐，因为 nav-item display CSS 属性是 block。所以它是一对一对齐的。

简单来说，要将项目居中对齐，您可以使用 flex 布局，如下所示。

.horizontalMenu>.horizontalMenu-list {
    text-align: left;
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;

    display: flex;
    justify-content: space-between;
}