Question

我正在尝试用css创建一个水平导航栏。

奇怪的是，如果我为var message = { to: user.deviceId, // required collapse_key: 'key', data: { title: 'Hello', body: 'Body' } };标签设置宽度，则水平浮动不起作用。如果我删除ol，它会按预期工作。

导致此问题的原因是什么？

CSS：

width

HTML：

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;
}

Answer 1

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

并使用此css作为内部li以避免浮动，因此它们可以像子菜单一样。

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

和外部的ol

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

我已将float：none覆盖到内部子级，因此他们可以进入下拉列表。

请参阅Demo

注意始终使用clear：使用float之后，否则如果宽度不够，就会产生白色间隙问题。

Answer 2

您可能对flexbox方法感兴趣。它简化了整个过程。

此外，我使用details和summary标签实现了嵌套的子导航。

HTML：

<nav>
  <a href="reiseziele.html">Reiseziele</a>

  <details id="container">
    <summary><a href="kontakt.html">Kontakt</a></summary>
    <a href="kontakt_mail.html">E-Mail</a>
    <a href="kontakt_formular.html">Formular</a>
  </details>

</nav>

CSS：

nav {
    display: flex;
    background-color: #8F8E93;
    justify-content: space-around;
    align-items: flex-start;
}

nav ol {
    margin: 0;
}

演示：http://codepen.io/to7be/pen/XNjRLG

水平导航栏不能使用指定的宽度

2 个答案: