Question

是否有可能在不破坏30px高度的情况下将所有这些跨度放在一条线上？如果内容超过300px，我想获得一个滑块。

将生成行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

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

您可以使用两个属性：

.line {
  white-space:nowrap;
}

而不是浮动：

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

Answer 2

摆脱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/

div中的内联内容，不会破坏一行

2 个答案: