0

div内の1つの行に複数の要素を追加しようとしています。ただし、スペースが不足すると、2行目に溢れます。どうすればそれらを1行に強制できますか？必要に応じてx軸に沿ったスクロールバーを表示したいのですが、2行目にこぼれないようにする必要があります。

これをiPadのようなタッチスクリーンデバイスと組み合わせることを目的としているので、要素の水平スクロール効果が得られます。

これがフィドルです：http： //jsfiddle.net/PW5Q5/8/

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="element"></div>
    <div id="element"></div>
    <div id="element"></div>
</div>

CSS

div#wrapper {
    height: 150px;
    width: 500px;
    border: 1px red solid;
    overflow-x: auto;
}
div#element {
    height: 100px;
    margin-top: 25px;
    width: 200px;
    border: 1px blue solid;
    display: inline-block;
    margin-left: 30px;
}
​
4

1 に答える 1

4

使用white-space: nowrap-http ：//jsfiddle.net/PW5Q5/14/

div#wrapper {
    height: 150px;
    width: auto;
    border: 1px red solid;
    overflow-x: auto;
    white-space:nowrap;
}
于 2012-07-01T22:16:11.687 に答える