Question

我正在尝试为网站制作一个垂直侧边栏。 ul中有几个主要项目，如果这些项目包含子类别，则新的ul会嵌套在其父ul下的主li内（这是更多从下面的代码明显）。在最新版本的Chrome中，它会按预期显示，但在最新的Firefox中，父li与嵌套ul中的相应子项之间存在空格。有关事业的任何想法？

这是基本的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中加载这些内容，您应该能够看到差异。

Answer 1

空间正在发生，因为“显示：内联;”在.navigation类上。你也许可以尝试漂浮它吧。

Firefox中嵌套ul的额外空间，但不包括Chrome

1 个答案: