html - div内的内联内容，不换行

Question

http://jsfiddle.net/FhhP4/

是否有可能在不破坏 30px 高度的情况下将所有这些跨度放在一行中？如果内容的宽度大于 300 像素，我想获得一个滑块。

将生成行 div 内的内容，它必须是“float:left”元素

只有 css 和 hmtl

    <div id="box">
    <div class="line">
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="labelx">Label TXT</span>
    </div>
    <div class="line">
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="labelx">Label TXTwergwergwergweg</span>
    </div>
    </div>

    #box {
    width:200px;
    height:500px;
    border:1px solid #000;
    overflow:auto;
    }

    .line {
    height: 30px;
    width: 100%;
    background:#eee;
    }

    .icon {
    float:left;
    width:40px;
    height:30px;
    background:#000;
    }

Answer 1

摆脱float: left，设置display: inline-block为.icon，设置overflow: auto为#box。

代码：

#box {
    width:200px;
    height:400px;
    border:1px solid #000;
    overflow: auto;
}

.line {
    height: 30px;
    width: 100%;
    background:#eee;
    white-space: nowrap;
}

.icon {
    width:40px;
    height:30px;
    background:#000;
    display: inline-block;
}

.labelx {
    color:#000;
    line-height: 30px;
}

工作样本：http: //jsfiddle.net/UXcje/1/

Answer 2

如果理解得很好，你需要一些像这个演示http://jsfiddle.net/FhhP4/13/

您可以使用两个属性：

.line {
  white-space:nowrap;
}

而不是浮动：

.icon, .labelx  {
  display:inline-block;
}