Foundation Framework：如何让移动 drop-down 中的多个链接水平对齐而不堆叠？

Question

我是第一次使用 Zurb 的 Foundation Framework 创建一个网站，到目前为止我很喜欢它，但是我被这个烦人的事情困住了！我不确定我是否遗漏了一些明显的东西，但如果你能帮助我，我会很高兴！

基本上，在桌面版中，我有几个社交媒体图标显示在顶部导航栏上方，一个接一个水平对齐。在移动版本中，我隐藏了最上面的一组社交媒体图标，并在更重要的导航项列表下方显示了第二组图标，这样它们就不会首先在菜单中弹出 drop-down。这一切都很好，我的问题是，由于社交媒体图标都非常小，我希望它们都排成一排，像桌面版一样水平对齐，但我只能让它们垂直显示。

我试过将它们放在一个

元素中，我也试过使用不间断的空格，但都没有用。有人知道如何解决吗？

顺便说一句，这是我正在处理的网站：http://cakebattermusic.com

明确一点，这是我希望它弹出的方式：（假设 F，T，我是 facebook twitter instagram）

HOME
CONTACT
WHATEVER
F T I

下面是它现在的弹出方式：

HOME
CONTACT
WHATEVER
F
T
I

是否可以只在列表的一部分而不是整个列表中水平列出 LI 元素？那将解决问题，但我一直无法弄清楚如何做到这一点或是否可能。

这是 html：

<!-- /////////////////////// HEADER ////////////////// -->

  <!-- HEADER SECTION -->
<div class="contain-to-grid header-section">

<!-- TOPBAR SECTION -->
<nav class="top-bar important-class" data-topbar>

<!-- TITLE AREA & LOGO -->
<ul class="title-area">
    <li class="name">
        <img src="img/logo.jpg" width="100px" alt="" id="logo-image">
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul> <!-- END TITLE AREA & LOGO -->

<!-- MENU ITEMS -->
<section class="top-bar-section">
   <ul class="right">
       <div id="hidden"> <!-- hidden in mobile view -->
        <li><a href="http://facebook.com/cakebattermusic" target="_blank"><img src="img/facebook.00_png_srz" border="0"></a></li>
        <li><a href="http://twitter.com/cakebattermusic" target="_blank"><img src="img/twitter.00_png_srz" border="0"></a></li>
        <li><a href="http://instagram.com/cakebattermusic" target="_blank"><img src="img/instagram.00_png_srz" border="0"></a></li>
        <li><a href="http://cakebattermusic.tumblr.com" target="_blank"><img src="img/tumblr.gif" border="0" width="20px"></a></li>
       </div>
    </ul>
    <br>
    <ul class="right">
        <li><a href="/index.html">HOME</a></li>
        <li><a href="/bio.html">BIO</a></li>
        <li><a href="/music.html">MUSIC</a></li>
        <li><a href="/videos.html">VIDEOS</a></li>
        <li><a href="/tour.html">TOUR</a></li>
        <li><a href="/contact.html">CONTACT</a></li>
        <div id="hidden2"> <!-- hidden in desktop view -->
        <li><a href="http://facebook.com/cakebattermusic" target="_blank"><img src="img/facebook.00_png_srz" border="0"></a>
        <a href="http://twitter.com/cakebattermusic" target="_blank"><img src="img/twitter.00_png_srz" border="0"></a>
        <a href="http://instagram.com/cakebattermusic" target="_blank"><img src="img/instagram.00_png_srz" border="0"></a>
        <a href="http://cakebattermusic.tumblr.com" target="_blank"><img src="img/tumblr.gif" border="0" width="20px"></a></li>
       </div>
    </ul>
    <br>

</section> <!-- END MENU ITEMS -->

Header CSS:

/*
   HEADER SECTION
   ==========================================================================     */
.header-section {
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  position: fixed;
  z-index: 999;
  min-width: 100%; }

.contain-to-grid {
  background-color: #fff; 
}

.header-fill {
  background: #fff;
  height: 120px; }
  .header-fill .tablet-mobile-logo img {
    padding-top: 30px; }

.padding-on-my-header {
  padding: 17px 0.9375rem 62px 0.9375rem; }
  .padding-on-my-header ul.title-area img {
    margin: -5px 0 0 0; }

.full-width {
  min-width: 100%; }

p {
  line-height: 3rem;
  padding-bottom: 30px; }

/*
   TOPBAR NAVGATION
   ==========================================================================     */


.top-bar {
  background: #fff;
  padding: 20px 0.9375rem 90px 0.9375rem;
  transition: all 0.5s ease 0.1s; }
  .top-bar ul.title-area img {
    margin: -10px 0 0 0; }
  .top-bar .top-bar-section ul {
        background: #fff; }
    .top-bar .top-bar-section ul li a:not(.button), .top-bar .top-bar-section ul li.active a:not(.button) {
      background: #fff;
       line-height: 30px;
      font-size: 16px;
      padding: 0;
      margin: 5px 0 0 0;
      text-transform: uppercase; }
    .top-bar .top-bar-section ul li a:not(.button):hover {
      background: #fff;
      border-bottom: 2px solid #c3c3c3;
      color: #333; }
    .top-bar .top-bar-section ul li.active a:not(.button) {
      border-bottom: 2px solid #c3c3c3;
      color: #333; }
      .top-bar .top-bar-section ul li.active a:not(.button):hover {
         background: #fff; }
    .top-bar .top-bar-section ul li {
      margin-left: 30px; }
      .top-bar .top-bar-section ul li a {
        color: #333; }
  .top-bar .top-bar-section ul li:hover:not(.has-form) > a {
    color: #333; }
  .top-bar .top-bar-section li ul.dropdown {
    background: #fff;
    border: 1px solid #ddd;
    color: #333; }
    .top-bar .top-bar-section li ul.dropdown li {
      border-bottom: 1px solid #ddd;
      margin: 0;
      padding: 5px 15px 5px 15px; }
  .top-bar .top-bar-section li ul.dropdown li a:not(.button):hover, .top-bar .top-bar-section li ul.dropdown li a:not(.button) {
    background: #fff;
    color: #222;
    border-bottom: none;
    padding: 20px -4px 40px 45px; }
  .top-bar .top-bar-section ul.dropdown li:hover:not(.has-form) > a:not(.button) {
    background: #fff;
    color: #222; }
  .top-bar .has-dropdown > a:after {
    border-color: rgba(0, 0, 0, 0.5) transparent transparent;
    margin-top: -5px; }

/*# sourceMappingURL=scss.css.map */



#hidden{
    display: inherit;
}

#hidden2{
    display: none;
}


@media only screen and (max-width: 600px) {

    #hidden{
        display: none;
    }
    #hidden2{
        display: inherit;
    }
  .top-bar {
    margin-top: 0;
    padding: 0;
    float: none; }
    .top-bar .toggle-topbar.menu-icon a {
      color: #222; }
      .top-bar .toggle-topbar.menu-icon a:after {
        box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222; }
    .top-bar ul.title-area img {
      margin: -2px 0 0;
      width: 50px; }
    .top-bar .top-bar-section ul {
      background: #333; }
      .top-bar .top-bar-section ul li {
        margin-left: 0; }
      .top-bar .top-bar-section ul li > a {
        background: #fff;
        border-radius: 0;
        font-size: 0.9rem; }
      .top-bar .top-bar-section ul li:not(.has-form) a:not(.button) {
        background: none;
        color: #222;
        padding: 10px 15px;
        margin-top: 0; }
        .top-bar .top-bar-section ul li:not(.has-form) a:not(.button):hover {
          background: #fff;
          color: #222;
          margin-top: 0; }
      .top-bar .top-bar-section ul li.active:not(.has-form) a:not(.button) {
        background: #fff;
        color: #222;
        padding: 10px 15px;
        margin-top: 0; }
        .top-bar .top-bar-section ul li.active:not(.has-form) a:not(.button):hover {
           background: white;
          margin-top: 0; }

  .top-bar.padding-on-my-header ul.title-area img {
    margin: 5px 13px 0;
    width: 35px; }

  .top-bar.expanded {
    margin-top: 0;
    padding: 0;
    float: none; }
    .top-bar.expanded .toggle-topbar.menu-icon a {
      color: #222; }
      .top-bar.expanded .toggle-topbar.menu-icon a:after {
        box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222; }
 }



/* ////// END HEADER //////*/

Answer 1

你可以用一点点 CSS 来做到这一点。我使用 Chrome 检查器找到正确的选择器作为目标。

示例 - http://codepen.io/rafibomb/pen/KpXEVe?editors=110

@media only screen and (max-width: 40.063em) {

  .top-bar-section ul.social-icons li {
    display: inline-block;
    width: 25%;
    float: left;
    text-align: center;
  }
}

Foundation Framework：如何让移动 drop-down 中的多个链接水平对齐而不堆叠？

Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

html

css

zurb-foundation