Question

我试图获得水平导航栏，但我无法让它正常工作。

nav {
    text-align: center;
}
    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
    }
        nav ul li {
            display: inline;
        }
            nav ul li a {
                text-decoration: none;
                display: block;
                width: 80px;
            }

Answer 1

将li设置为inline-block而不是inline。

nav ul li {
    display: inline-block;
}

Fiddle

Answer 2

FIDDLE

nav ul li {
    float: left;
}

Answer 3

简单的解决方案：

设置＆＃39; float：left＆＃39;对于列表元素，也可以显示：inline-block＆＃39;

nav ul li{
   float:left;
   display:inline-block;
}

让我知道它是否有效。我最近遇到了同样的问题。我可以帮助你更多。

Answer 4

或者您可以尝试使用inline-block而不是block

nav ul{
    display: block;
    overflow: hidden;
    margin: 0 auto;
}

nav ul li{
    display: inline-block;
}

Answer 5

float:right访问link

需要nav ul li

nav ul li {
     float:left;
     display: inline;
        }

导航菜单不会水平排列

5 个答案:

Fiddle