Question

这是标记：

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

这是少/ 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，float和white-space的某种组合会得到我想要的东西，但我不确定那是什么组合。

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

Answer 1

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

div, span { display: inline-block; }

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

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

See the Codepen with the changes

完整的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; }

如何让浮动的div（宽度未知）保持在一条线上

1 个答案: