在Firefox中嵌套ul中有多余的空间，但在Chrome中则没有

Question

在Firefox中嵌套ul中有多余的空间，但在Chrome中则没有

Scr*_*oot 0 firefox google-chrome nested spacing html-lists

我正在尝试为网站制作垂直边栏。中有多个主要项目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>

Run Code Online (Sandbox Code Playgroud)

这是相应的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);

}

Run Code Online (Sandbox Code Playgroud)

如果将它们同时加载到Chrome和Firefox中，则应该可以看到它们之间的区别。

Answer 1

chi*_*fet 5

由于“ display：inline;”而导致出现空格。在.navigation类上。您可以尝试将其正确浮动。

归档时间：	13 年，2 月前
查看次数：	1416 次
最近记录：	13 年，2 月前