html - 水平导航栏不适用于指定的宽度

Question

我正在尝试使用 CSS 创建水平导航栏。

奇怪的是，如果我为我的 ol 标签设置宽度，水平 float 将不起作用。如果我删除 width，它会按预期工作。

是什么导致了这个问题？

CSS:

nav {
    position: absolute;
    height: 40px;
    width: 100%;
    top: 240px;
    background-color: #8F8E93;
    float: left;
}

nav ol {
    width: 300px;
}


nav ol li {
    float: left;
}

nav>ol>li>a {
    display: block;
}

HTML:

<nav>
  <ol>
    <li><a href="reiseziele.html">Reiseziele</a></li>
    <li><a href="kontakt.html">Kontakt</a>
      <ol>
        <li><a href="kontakt_mail.html">E-Mail</a></li>
        <li><a href="kontakt_formular.html">Formular</a></li>
      </ol>
    </li>
  </ol>
</nav>

Answer 1

您必须为 li 提供 width，但在使用 css 选择器时要小心，否则它也会影响内部 li。

并将此 css 用于内部 li 以避免向左浮动，这样它们就可以像子菜单一样工作。

nav ol li ol li{
  float:none !important;;
}

和外层 ol li

nav ol li {
    float: left;
    width:50%;
}

我已经将 float:none 覆盖到 inner child，这样他们就可以进入下拉列表。

参见 Demo

注意 始终在使用 float 之后使用 clear:both 否则如果宽度不够好会产生空白问题。