0

Web サイトの垂直サイドバーを作成しようとしています。にはいくつかのメイン アイテムがありul、それらのアイテムにサブカテゴリがある場合、 newはその親の下ulのメイン内にネストされます(これは以下のコードからより明白です)。Chrome の最新バージョンでは、これは正常に表示されますが、最新の Firefox では、ネストされた 内の親とそれに対応するサブアイテムの間にスペースがあります。原因について何か考えはありますか？ulliliul

基本的なhtmlは次のとおりです。

<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
        </script>
        <style>
        </style>
        <link rel="stylesheet" href="style.css" type="text/css">
        </head>
<body>
 <ul class="navigation">
   <li>ITEM1</li>
   <li>ITEM2</li>
     <ul class="navigation subitem">
       <li>subitem1</li>
       <li>subitem2</li>
       <li>subitem3</li>
     </ul>
   <li>ITEM3</li>
  </ul>
</body>
</html>

対応する CSS は次のとおりです。

.navigation {
    display: inline;
    width: 150px;
    margin-top: 5px;
    padding-left: 15px;
    text-align: right;
    vertical-align: middle;
}

.subitem {
    margin: 0px;
    vertical-align: top;
    top: 0px;

}

.navigation li {
    display: block;
    font-family: 'Oxygen';
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-top: 15px;
}

.subitem li {
    font-size: 0.6em;
    margin-top: 3px;
    color: rgba(0, 0, 0, 0.9);

}

これらを Chrome と Firefox の両方にロードすると、違いがわかるはずです。

4

1 に答える 1

5

「display: inline;」が原因でスペースが発生しています。.navigation クラスで。多分それを右に浮かべてみてください。

于 2012-09-19T16:36:54.173 に答える