1

聞こえるほど単純ではありません。

水平方向にスクロールする div があります。その中のコンテンツは動的であり、変更される可能性があります。

これまでのところ、webkit で適切に動作するようにできましたが、試してみると、firefox、opera、およびおそらく IE のいずれでも適切に動作しません。

構造は非常に単純で、コンテナー、相対的に配置された親、および内部にリスト アイテムを含む ul です。

<div class="extra-holder">
    <div class="extra-holder-inner">
        <ul>        
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>               
        </ul>
    </div>
</div>  


.extra-holder {
    height: 160px;
    display: block;
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    z-index: 41;

    line-height: 1;
    background-color: white;
    position: fixed;
    border-bottom: 1px solid #d7d7d7;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
}

.extra-holder-inner {
    position: relative;
    display: inline-block;
}

.extra-holder ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.extra-holder ul li {
    margin: 0;
    padding: 0;
    float: left;
    height: 140px;
    width: 300px;
    white-space:normal;
    border-left: 1px solid #d7d7d7;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

問題は、リスト項目が折り返されているように見えることです。ユーザーがスクロールできるように、すべてを一列に並べる必要があります。

より良いアイデアを得ることができるように、jsfiddle を作成しました。

http://jsfiddle.net/QFnVk/

クロム - ファイアフォックスで左右にスクロールできます - リスト項目はビューポートの幅が許す限り表示され、下に積み重ねられます。

4

1 に答える 1

1

あなたの.extra-holder ul liルールではfloat: left;、display: inline-block;

Firefoxで動作する更新されたフィドルは次のとおりです

于 2013-06-10T13:53:04.873 に答える