スパンまたはdivの折り返しを防止

147

div固定幅の要素のグループをコンテナーに入れて、水平スクロールバーを表示させたいのですが。div/span要素は、HTML（基本的に開封された）に表示されている順序で左から右へのラインに表示されます。

これにより、水平スクロールバーが表示され、垂直スクロールバーの代わりに使用して、コンテンツを読み進めることができます（左から右）。

私はそれらをコンテナに浮かせて、white-space: nowrapスタイルをコンテナに入れてみましたが、残念ながら、まだラップされているようです。

アイデア？

それはこのように見えました：

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}

<div class="slideContainer">
    <div class="slide">Some content</div>
    <div class="slide">More content</div>
    <div class="slide">Even More content!</div>
</div>

スニペットを展開

更新：例
についてはサイトを参照してください。ただし、別の方法ではないことは間違っていました-記事は古いと思います。

html css

— cgp
ソース

182

これを試して：

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}

<div class="slideContainer">
    <span class="slide">Some content</span>
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="slide">Even more content!</span>
</div>

スニペットを展開

省略できることに注意してください.slideContainer { overflow-x: scroll; }（どのブラウザがサポートするかしないかを読んだときにするし）、このコンテナーではなくウィンドウにスクロールバーが表示されます。

ここでの鍵はdisplay: inline-blockです。これは現在、適切なクロスブラウザーサポートを備えていますが、いつものように、すべてのターゲットブラウザーでテストすることは確かです。

— ロンデベラ
ソース

1

実際、私は完全なプレゼンテーションとは別にこれを試しましたが、それは比較的うまく機能しているようです（少なくともFirefox 3、IE 7、Chrome、Operaで、私が気にしているのはこれだけです）

— cgp

white-space:normal含まれている要素とwhite-space:nowrap親を設定するだけでうまくいきました。どうもありがとう！

— Noitidart、2015年

white-space：normalがデフォルト値なので、設定しなくても大丈夫です。

— パート

@Parth white-space: normalは、デフォルトwhite-spaceで親によってオーバーライドされているため、この場合は子に設定する必要がありますnowrap。

— GullerYA

17

これだけで動作します：

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

私はもともと持っfloat : left;ていたので、正しく機能しませんでした。

このソリューションを投稿していただきありがとうございます。

— デモリシュン
ソース

3

Twitterのようなもの使用するとき特にブートストラップを、white-space: nowrap;子供にパディングやマージンを適用する場合、常にCSSでは動作しませんdiv。ただし、代わりにborder: 20px solid transparent;、パディング/マージンの代わりに同等のスタイルを追加すると、より一貫して機能します。

— ブランドスクリプト
ソース

1

言及したように、あなたは使うことができます：

overflow: scroll;

必要なときにのみスクロールバーを表示したい場合は、「自動」オプションを使用できます。

overflow: auto;

「float」プロパティを「overflow」と一緒に使用する必要はないと思いますが、最初に例を試してみる必要があります。

— jthompson
ソース

0

divは自分の体の幅を超えないように見えます。別のdiv内でも。

私はこれをテストするために（doctypeなしで）投げましたが、それは思ったように動作しません。

.slideContainer {
    overflow-x: scroll;
}
.slide {
    float: left;
}

<div class="slideContainer">
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>
</div>

スニペットを展開

私が考えているのは、内部のdivはiFrameを介してロードできるということです。これは、別のページであり、コンテンツが非常に広いためです。

— アラファーワーゲ
ソース

overflow-xまたはscroll-x、どちらであるか思い出せません。今日は怠惰。

— ケントフレドリック