メインの内側でdivを水平方向にスクロールする方法

水平にスクロールしようとしています。スクロールバーが表示されますが、スクロールバーは表示されません。下のスクロールインジケータを表示する必要がないので、あなたのdivが広すぎるメインの内側でdivを水平方向にスクロールする方法

<!DOCTYPE html> 
<html> 
<head> 
    <title>qwe</title> 
</head> 
<body> 
<div style="width: 1000px; overflow-: scroll;"> 
    <div style="float: left;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div> 
    <div style="float: left;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div> 
    <div style="float: left;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div> 
    <div style="float: left;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div> 
    <div style="float: left;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div> 
    <div style="float: left;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div> 
    <div style="float: left;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div> 
</div> 
</body> 
</html>

出典

2017-07-18 cks

です。また、overflowcssプロパティの代わりにoverflow-の小さなタイプミスがあります。とにかくスクロールを水平にしたい場合は

、divの幅を小さくしてみてください。役立ちます:)

出典

2017-07-18 06:58:29 Antoine

divは十分小さい – cks

は親に子供にdisplay: inline代わりのfloat:leftとwhite-space: nowrapを与える

<body> 
<div style="width: 300px; overflow: scroll;"> 
    <div style="float: left;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div> 
    <div style="float: left;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div> 
    <div style="float: left;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div> 
    <div style="float: left;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div> 
    <div style="float: left;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div> 
    <div style="float: left;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div> 
    <div style="float: left;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div> 
</div> 
</body>

希望を。

<body> 
<div style="width: 300px; overflow: scroll; white-space: nowrap;"> 
    <div style="display: nline;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div> 
    <div style="display: nline;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div> 
    <div style="display: nline;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div> 
    <div style="display: nline;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div> 
    <div style="display: nline;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div> 
    <div style="display: nline;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div> 
    <div style="display: nline;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div> 
</div> 
</body>

出典

2017-07-18 07:06:58

thanxそれは助けました！ – cks

単に水平スクロールを行うことはできません。スクロールを表示するだけでスクロールできません。私はCodepenのリンクを作成しましたが、あなたの要件を達成するためには必ずそれが役に立ちます。

codepen

.container { 
    display: flex; 
    border: 1px solid #ddd; 
    max-width: 300px; 
    min-height: 300px; 
    align-items: center; 
    justify-content: center; 
    flex-wrap: nowrap; 
    overflow-x: hidden; 
    overflow-y: auto; 
    transform: rotate(-90deg); 
    position: relative; 
} 

.wrapper { 
    display: flex; 
    width: 300px; 
    height: 300px; 
    transform: rotate(90deg); 
    align-items: center; 
    justify-content: center; 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
} 

article { 
    flex-grow: 1; 
    display: flex; 
    justify-content: center; 
    min-width: 100%; 
}

それをチェックして、それはあなたの条件だったか、されていないかどうかを確認。

出典

2017-07-18 07:30:36 Abinthaha

メインの内側でdivを水平方向にスクロールする方法

答えて

関連する問題