BinaryDevelop
  1. ホーム
  2. html

[解決済み] spanやdivの折り返しを防止する

2022-04-30 20:18:14

質問

のグループを配置したい。 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>

UPDATE

参照 サイト の例もありますが、他の方法はないというのは間違いでした。

解決方法は？

これを試してみてください。 

.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 . これには クロスブラウザへの適切な対応 しかし、いつものように、念のためすべてのターゲットブラウザでテストする価値があります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します