0

http://jsfiddle.net/FhhP4/

30px の高さを壊さずに、このすべてのスパンを 1 行で取得することは可能ですか? 幅が 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;
    }
4

2 に答える 2

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/

于 2013-10-30T13:59:35.497 に答える
0

よく理解している場合は、このデモhttp://jsfiddle.net/FhhP4/13/のようなものが必要です

次の 2 つのプロパティを使用できます。

.line {
  white-space:nowrap;
}

フロートの代わりに：

.icon, .labelx  {
  display:inline-block;
}
于 2013-10-30T13:55:08.970 に答える