Question

我遇到了同样的问题。我将显示更改为内联，但似乎不起作用。谁能告诉我我做错了什么？

                        ul{
            width:100%;
            padding: 0;
            margin: 0;

            li{
            list-style-type: none;
            float: left;
            padding-left: 10px;
            display: inline;
            white-space: nowrap;

                a{
                    text-decoration: none;
                    font-size: 16px;
                    letter-spacing: -1px;
                    color: @darkGrey;
                    padding-right: 6px;

                    &:hover{
                        color: @mainColor;
                    }
                }
            }

Answer 1

这两条评论适用于LESS CSS或常规CSS

在您声明a:hover和a:link之前，您无法声明a:visited。
您不需要display:inline和float:left。 Float正在应用于块级元素，但使用display：inline，您将使<li>成为内联元素。

Answer 2

我认为你正在使用LESS CSS等。

尝试显示块而不是内联。

li{
     display: block;
}

Answer 3

由于消除了对css / less-css的歧义，删除了原始答案，但由于一些好评，我决定留下问题。

Answer 4

演示：http://plugins.amiwithyou.com/lesscss/demo.htm

根据文档，您需要将您的.less样式表与rel设置为“stylesheet / less”链接：

<link rel="stylesheet/less" type="text/css" href="styles.less">

然后从页面顶部下载less.js，并将其包含在页面元素中，如下所示：

<script src="less.js" type="text/javascript"></script>

确保在脚本之前包含样式表。

然后在styles.less文件中添加以下内容

 @darkGrey:#777;
 @mainColor:#333;
 ul{             
     width:100%;             
     padding: 0;             
     margin: 0;              
     li{             
         list-style-type: none;             
         padding-left: 10px;             
         display: inline;             
         white-space: nowrap;                  
             a{                     
             text-decoration: none;                     
             font-size: 16px;                     
             letter-spacing: -1px;                     
             color: @darkGrey;                     
             padding-right: 6px;                      
                &:hover{                         
                 color: @mainColor;                     
                }                 
            }             
        }
}

请注意，

我删除了float：left

和

在最后添加了“}”

用lesscss </li>水平显示<li>

4 个答案: