2

マークアップは次のとおりです。

<nav id="the-nav">
    <span id="backward"><i class="icon-backward"></i></span>
    <div class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="active-module"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a href="#"><img src="..."></a>
             </li>
            <li>
                <a href="#"><img src="..."></a>
            </li>
        </ul>
    </div>

    <div class="wrapper">
        <div class="modules">
            <div class="module active">
                <a href="..."><i class="icon-*"></i></a> <!-- a few bootstrap icons are used -->
                <a href="..."><i class="icon-*"></i></a>
                <a href="..."><i class="icon-*"></i></a>
            </div>
            <div class="module">
                <a href="..."><i class="icon-*"></i></a>
                <a href="..."><i class="icon-*"></i></a>
                <a href="..."><i class="icon-*"></i></a>
                <!-- More items here... -->
            </div>

            <!-- More modules here... --> 

        </div>
    </div>

    <span id="forward"><i class="icon-forward"></i></span>
</nav>

そして、ここにless/cssがあります：

#the-nav {
  @itemDimension: 35px;
  @dropdownWidth: 150px;

  background: white;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;

  /* Square mixin for items and navigator arrows. */
  .square () {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    height: @itemDimension;
    padding: 3px;
    width: @itemDimension;
  }

  div, span { float: left; }

  /* Module Dropdown */
  .dropdown {
    font-size: 12px;
    white-space: nowrap;
    width: @dropdownWidth;

    /* Make dropdown drop "up". */
    &.open > .dropdown-menu {
      bottom: 100%;
      top: inherit;
    }

    .active-module {
      overflow: hidden;
      text-overflow: ellipsis;
      width: @dropdownWidth;
    }

    img {
      height: 30px;
      width: 30px;
    }
  }

  .wrapper {
    overflow: hidden;
    position: relative;
    white-space: nowrap;

    /* Set width so that there is just enough room for the forward and back
     * arrows. As a fallback, give it a percentage width. */
    width: 88%;
    width: -webkit-calc(100% ~'-' 2*@itemDimension+@dropdownWidth);
    width: -moz-calc(100% ~'-' 2*@itemDimension+@dropdownWidth);
    width: calc(100% ~'-' 2*@itemDimension+@dropdownWidth);
  }

  /* Forward/backward scoll buttons */
  #forward, #backward {
    .square;
    padding: 7px 0 0 10px;

    &:hover {
      background: lightblue;
    }
  }

  /* Module items */
  .module > a {  
    .square;
    float: left;
    text-align: center;

    i {
      display: block !important;
      font-size: 120%;
      margin-top: 6px !important;
    }
  }

  .module:not(.active) { display: none; }
}

表示されるモジュール (ドロップダウンで決定) は、javascript を使用して設定されます。

このナビゲーションバー全体を 1 行に収めたいと思います。現在、Chrome では動作しますが、Firefox では動作しません。Firefox では、ナビゲーション バー全体が複数の行にまたがるように、各モジュールの内容が新しい行に折り返されます。これをすべて1行にまとめたい。

display、float、およびの組み合わせがいくつかあると感じていますがwhite-space、それは私が望むものを取得しますが、その組み合わせが何であるかはわかりません。

更新これは、 私が欲しいものを正確に示すコードペンです。繰り返しますが、これは chrome では機能しますが、firefox では機能しません。http://codepen.io/anon/pen/Bolnd

4

1 に答える 1