0

li を水平に表示する際に問題が発生しています。フォーラムを読み、提案された解決策をいくつか試しましたが、役に立ちませんでした。ここにコードを添付しています。誰かがこのナビゲーションを水平方向に表示するのを手伝ってくれませんか(そしてブラウザ間で互換性があります)。

これが私のコードです：

nav.PgHdrMenu{ 高さ: 35px; フロート: 右; a{ テキスト装飾: なし; 文字間隔: -1px; 色: @darkGrey; 右パディング: 6px;"

&:hover{
  color: @mainColor;
    }
 }

 ul{
padding-top:10px;
width:100%;
float:right;

li{
   list-style-type: none;
   float: right;
   margin-left: 5px;
   display: block; 

a{
  text-decoration: none;
  color: #f1f1f1;
  padding: 7px;
  border-right: 1px solid #1686a2;
  background: #1686a2;
  background: -webkit-gradient(linear, left top, left bottom, from(#1686a2), to(@darkGrey)); 
  background: -moz-linear-gradient(top,  #1686a2,  @darkGrey);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1686a2', endColorstr='@darkGrey', GradientType=0);

-moz-border-radius:5px;
    -webkit-border-radius:5px;
border-radius:5px;


     &:hover{
   background: #1686a2;
   background: -webkit-gradient(linear, left top, left bottom, from(@darkGrey), to(#1686a2)); 
   background: -moz-linear-gradient(top,  @darkGrey, #1686a2);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@darkGrey', endColorstr='#1686a2', GradientType=0);
    color:@lightGrey;
    }
}

     &:last-child > a{// get rid of last right-margin
 border: none;
        }
}
 }

HTML タグ:

<nav class=PgContentMenu >
<ul>
  <li>
    <a href="index.html">Home</a>
  </li>
  <li>
    <a href="about.html">About Us</a>
  </li>
  <li>
    <a href="product.html">Products</a>
  </li>
 </ul>
</nav>
4

1 に答える 1

1

で CSS 定義を「閉じる」のを忘れていました}。

例えば：

ul{
padding-top:10px;
width:100%;
float:right;

{ul 要素のスタイルを定義するために開いた を閉じていないため、無効です。への変更：

ul
{
    padding-top:10px;
    width:100%;
    float:right;
}

すべての定義を確認してください。ほとんどの定義を閉じるのを忘れていました。ちょっとした提案をしたいと思います: 私たちは皆、開いた中括弧を閉じるのを忘れています (深いネストがなくても)。さらに、開き括弧を 1 行だけにすると (2 番目の例のように)、ブロックがより明確に表示されます。これは単なるコーディング スタイルですが、多くの時間を節約し、コードをより明確にすることができます (これは 90% の個人的な好みです)。

于 2012-05-09T21:48:11.020 に答える