Question

这里有一个菜鸟。只需要一些帮助，让这个菜单在线。它目前显示为垂直列表。这是相关的代码：

#background #header #nav {
    float: right;
    list-style-type: none;
    margin-top: 100px;
    font-color: #40C8F4;
}
#background #header #nav ul {
    list-style-type: none;
    list-style-position: inside;
    display: inline;
    font-color: #40C8F4;
    color: #40c8f4;
}

#background #header #nav ul li{
    text-decoration: none;
    color: #40C8F4;
    font-color: #40C8F4;
    }
#background #header #nav ul li .scroll {
    text-decoration: none;
    color: #40c8f4;
    display: inline;
}

Answer 1

为li元素设置内联： -

#background #header #nav ul li{
    text-decoration: none;
    color: #40C8F4;
    font-color: #40C8F4;
    display:inline ;
}

这将有效

Answer 2

尝试添加：

#background #header #nav ul li{
    text-decoration: none;
    color: #40C8F4;
    font-color: #40C8F4;
    display:inline;
    float:left;
}

Answer 3

使用您的css但随机HTML， here is a demo

由于您使用的是inline，我建议您在inline-block上使用div，因为这样，默认display属性不会受到影响，而且您也是获得inline个功能。
div是默认的display:block级元素

<强> CSS

  #background #header #nav {
    float: right;
    list-style-type: none;
    margin-top: 100px;
    font-color: #40C8F4;
    display: inline-block;  /* add this */
}
#background #header #nav ul {
    list-style-type: none;
    list-style-position: inside;
    display: inline;
    font-color: #40C8F4;
    color: #40c8f4;

}
#background #header #nav ul li {
    text-decoration: none;
    color: #40C8F4;
    font-color: #40C8F4;
    display: inline-block;/* add this */

}
#background #header #nav ul li .scroll {
    text-decoration: none;
    color: #40c8f4;
    display: inline-block;
}

显示：内联无法正常工作

3 个答案: