基础框架:如何在移动下拉列表中获得多个链接，使其水平对齐而不是堆叠？

Question

我正在创建一个网站使用Zurb的基础框架第一次，我喜欢到目前为止，但我被困在这个烦人的事情！我不知道我是不是错过了一些显而易见的事情，但如果你能帮我，我会很高兴的！

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

--我尝试过将它们放在一个< li >元素中，并且尝试使用不可破坏的空格，但两者都不起作用。有人知道如何修复吗？

顺便提一下，是我正在开发的网站： 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 -->

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