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

Question

I have a website build in HTML and CSS, now I am making small changes to the template as I bought it from Envato, the header menu is aligned to the left by default using the following 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; }

now I want to make the menu to come in the center so I removed the float property from the CSS and now the menu is displaying like below:

can anyone please tell me what could be wrong here or how to fix it, thanks in advance

Answer 1

The nav items are aligned vertically because nav-item display CSS attribute is block . So it's aligned one on one line.

Simply, to align items on the center, you can use flex layout as follows.

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

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