css - 显示水平与lesscss

Question

http://lesscss.org/

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

                        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 或类似的东西。

尝试显示块而不是内联。

li{
     display: block;
}

Answer 2

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

1. 在您声明anda:hover之前，您不能声明。a:linka:visited
2. 你不需要两者display:inline和float:left。Float 应用于块级元素，但使用 display:inline，您正在制作<li>一个内联元素。

Answer 3

---

演示： 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;                     
                }                 
            }             
        }
} 

请注意，

• 我已经删除了浮动：左

和

• 在末尾添加“}”

Answer 4

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