Question

我正在关注Foundation Top Bar的教程，当在浏览器（Firefox和Chrome）上运行代码时，它会垂直显示而不是水平显示。我已尝试使用显示设置，将其更改为内联和内联块，问题仍然存在。

因为它现在通过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

有多种方法可以做到这一点。例如，您可以使用内联，内联块或flexbox。您可以了解更多关于内联块和内联块here之间的区别，但我相信使用flexbox更方便灵活（没有双关语）。

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

内联项目非常严格。它们仅支持margin-left，margin-right，padding-left，padding-right。而且，它们没有高度。

内联块：更好的选择。

内联块项目支持margin，padding，width，height。它对垂直居中很有用。

虽然，您需要处理元素之间的空格。这有时会变得很痛苦。

花车：一个不错的选择。

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

Flexboxes ：可能是目前最好的选择。

Flexboxes为您提供了很大的自由。他们支持上述所有内容，以及一些额外内容。

项目的顺序独立于来源。您可以直接在css中订购商品，这可能非常有用（例如，对于响应式布局）。它还支持等高。

不过，恕我直言，Flexbox有一个陡峭的学习曲线。语法不是很直观，你的模板有时可能会被很多包装div所臃肿。

＆＃13;

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

＆＃13;

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

＆＃13;

菜单不会水平显示

1 个答案: