html - 菜单不水平显示

Question

我正在按照 Foundation Top Bar 的教程进行操作，当在浏览器(Firefox 和 Chrome)上运行代码时，它会垂直显示而不是水平显示。我已尝试使用显示设置，将其更改为内联和内联 block ，但问题仍然存在。

因为现在没有通过 app.css 文件覆盖它的 CSS，只是 foundation.css 文件中开箱即用的 css。任何想法可能是什么原因造成的？谢谢

<div class="top-bar">
<div class class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
 <li class="menu-text">Site Title</li>
  <li>
    <a href="#">One</a>
    <ul class="menu vertical">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
  <li><input type="search" placeholder="Search"></li>
  <li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>

Answer 1

有多种方法可以做到这一点。例如，您可以使用内联、内联 block 或 flex 盒。您可以详细了解内联和内联 block 之间的区别 here ，不过，我相信使用 flexboxes 更方便和灵活(没有双关语意)。

内联:很可能不是最佳选择。

内联元素非常严格。它们只支持margin-left、margin-right、padding-left、padding-right。此外，它们没有高度。

Inline-block :更好的选择。

行内 block 元素支持margin、padding、width、height。它对于垂直居中很有用。

不过，您需要处理元素之间的空格。这有时会成为一种痛苦。

float :一个不错的选择。

很多布局框架都使用 float 。它们非常方便，并且有很多文档，因为它们已经存在了一段时间。

Flexboxes:可能是目前可用的最佳选择。

Flexboxes 给了你很大的自由度。他们支持以上所有内容，外加一些额外功能。

元素的顺序与来源无关。您可以直接在 css 中订购商品，这非常有用(例如，对于响应式布局)。它还支持等高。

不过，恕我直言，Flexbox 的学习曲线很陡。语法不是很直观，您的模板有时会因大量包装 div 而变得臃肿。

/* Inline example */
.inline li {
    display: inline;
}


/* Inline-block example */
.inline-block li {
    display: inline;
}


/* Floats example */
.float li {
    float: left;
}


/* Flexboxes example */
.flexboxes ul {
    display: flex;
}

.flexboxes .menu-item {
    flex: 2;
}

.flexboxes .site-title {
    flex: 1;
}


/* Common */
ul {
  list-style-type: none;
}

div {
    width: 100%;
}

li {
    background-color: #ccc;
}

<div class="inline">
  <ul>
    <li>Site Title</li>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
</div>

<div class="inline-block">
  <ul>
    <li>Site Title</li>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
</div>
<div class="float">
  <ul>
    <li class="site-title">Site Title</li>
    <li class="menu-item"><a href="#">One</a></li>
    <li class="menu-item"><a href="#">Two</a></li>
    <li class="menu-item"><a href="#">Three</a></li>
  </ul>
</div>
<br>
<div class="flexboxes">
  <ul>
    <li class="site-title">Site Title</li>
    <li class="menu-item"><a href="#">One</a></li>
    <li class="menu-item"><a href="#">Two</a></li>
    <li class="menu-item"><a href="#">Three</a></li>
  </ul>
</div>