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 设置的。

我希望整个导航栏保持在一条线上。目前，它适用于 Chrome，但不适用于 Firefox。在 Firefox 中，每个模块的内容都会换行，这样整个导航栏就会跨越多行。我希望这一切都保持在一条线上。

我有一种感觉 , , 的组合，display这会得到我想要的，但我不确定那个组合是什么。floatwhite-space

更新 这是一个代码笔，它准确地显示了我想要的东西。同样，这适用于 chrome，但不适用于 Firefox。http://codepen.io/anon/pen/Bolnd

4

1 回答 1

1

删除float: left并添加display: inline-block;到div, span：

div, span { display: inline-block; }

考虑填充重新计算.wrapper宽度：

width: calc(100% ~'-' 2*@itemDimension+@dropdownWidth+2*@itemPadding+2*@directionalLeftPadding);

请参阅带有更改的 Codepen

完整的 CSS LESS 代码：

/* Bootstrap */
@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css');
/* FontAwesome */
@import url('http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');

@directionalLeftPadding: 10px;
@itemPadding: 3px;
@itemDimension: 35px;
@dropdownWidth: 150px;

.square () {
  box-sizing: border-box;
  height: @itemDimension;
  padding: @itemPadding;
  width: @itemDimension;
}

div, span { display: inline-block; }

nav {
  bottom: 0;
  position: fixed;
  width: 100%;
}

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

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

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

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

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

  /* 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+2*@itemPadding+2*@directionalLeftPadding);
  width: -moz-calc(100% ~'-' 2*@itemDimension+@dropdownWidth+2*@itemPadding+2*@directionalLeftPadding);
  width: calc(100% ~'-' 2*@itemDimension+@dropdownWidth+2*@itemPadding+2*@directionalLeftPadding);
}

/* Forward/backward scoll buttons */
#forward, #backward {
  float: left;
  .square;
  padding: 7px 0 0 @directionalLeftPadding;

  &:hover {
    background: lightblue;
  }
}

/* Module items */
.module > span {  
  .square;
  text-align: center;

  &:not(:last-child) { border-right: 1px solid black; }

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

.module:not(.active) { display: none; }
于 2013-07-26T12:48:57.107 回答