wie scrollen divs horizontal innerhalb der Haupt

ich versuche, horizontal zu scrollen. Es zeigt die Bildlaufleiste, aber es scrollt nicht ?? unten ist diewie scrollen divs horizontal innerhalb der Haupt

<!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>

Quelle

2017-07-18 cks

Ihre div zu breit ist, so gibt es keine Notwendigkeit, Scroll-Indikatoren angezeigt ist. Sie haben auch einen kleinen Tippfehler mit overflow- anstelle von overflow CSS-Eigenschaft.

Wenn Sie blättern trotzdem horizontal wollen, versuchen Sie die div Breite zu reduzieren:

<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>

Hoffnung, das hilft :)

Quelle

2017-07-18 06:58:29 Antoine

das div ist klein genug – cks

Gib display: inline auf das Kind statt float:left und white-space: nowrap an die Eltern.

<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>

Quelle

2017-07-18 07:06:58

danke es half !!! – cks

Nicht einfach können Sie ein horizontales Scrollen geben. Und wenn man nur den Scroller anzeigt, kann man nicht scrollen. Ich habe einen Codepen-Link erstellt, der Ihnen sicher helfen wird, Ihre Anforderung zu erfüllen.

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%; 
}

es prüfen und bestätigen, wenn es Ihre Anforderung ist oder nicht.

Quelle

2017-07-18 07:30:36 Abinthaha

wie scrollen divs horizontal innerhalb der Haupt

Antwort

Verwandte Themen