0

我正在尝试为网站制作垂直侧边栏。中有几个主要项目ul，如果这些项目有子类别，那么一个新项目ul将嵌套在ul其父项下方的主要项目中li（这在下面的代码中更明显）。在最新版本的 Chrome 中，它应该显示，但在最新的 Firefoxli中，在嵌套的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 中加载这些内容，您应该能够看到差异。

4

1 回答 1

5

由于“display：inline;”，空间正在发生 在 .navigation 类上。您可以尝试将其正确浮动。

于 2012-09-19T16:36:54.173 回答