html中的水平菜单在删除CSS中的float属性时显示错误

问题描述

我有一个使用HTML和CSS构建的网站，现在我正在从Envato购买模板时对模板进行一些小的更改，默认情况下，标题菜单使用以下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中删除了float属性，现在菜单显示如下：

任何人都可以告诉我这里有什么问题或解决方法，谢谢。

解决方法

导航项垂直对齐，因为导航项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;
}