1

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;
                    }
                }
            }
4

4 に答える 4

1

これらの2つのコメントは、LESSCSSまたは通常のCSSの両方に適用されます

  1. とa:hoverを宣言するまで宣言することはできません。a:linka:visited
  2. display:inlineとの両方は必要ありませんfloat:left。Floatはブロックレベルの要素に適用されますが、display：inlineを使用すると<li>、インライン要素を作成できます。
于 2012-05-10T00:34:35.917 に答える
1

私はあなたがLESSCSSなどを使用していると思います。

インラインではなくディスプレイブロックを試してください。

li{
     display: block;
}
于 2012-05-10T00:36:14.997 に答える
0

css / less-cssの曖昧性解消のために元の回答が削除されましたが、いくつかの良いコメントのために質問を残すことにしました。

于 2012-05-10T00:34:12.513 に答える
0

デモ: http://plugins.amiwithyou.com/lesscss/demo.htm

ドキュメントに従って、rel を「stylesheet/less」に設定して .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 を削除しました

と

  • 最後に「}」を追加
于 2012-05-10T01:12:04.947 に答える