项目 divs 的水平滚动限制在更大的 div

Question

如果您查看 jsfiddle 产品，您会看到图标都装在橙色框中。但是，您必须垂直滚动才能搜索它们，而我试图水平滚动。我该怎么做？

HTML

<!DOCTYPE>
<HTML>

<head>
    <meta charset="UTF-8">
    <title> My Home Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <div class="banner">   
        <h1> Welcome!<span style="color:#FF009D" class="dot">•‌</span><span style="color:#12E00B" class="dot">•‌</span><span style="color:#FF9D00" class="dot">•‌</span> </h1>
    </div>
            <div class="wrap"> 
                    <div class="item">    
                        <a href="https://www.youtube.com/user/maxxchewning">
                            <img src="http://i.ytimg.com/vi/HrkZQ3EOmFQ/hqdefault.jpg"/>
                                <div class="button"></div>
                        </a>    
                    </div>

                    <div class="item">
                        <a href="https://www.youtube.com/user/Christianguzmanfitne">
                            <img src="http://i.ytimg.com/vi/zsD_7hkfEwY/hqdefault.jpg"/>
                            <div class="button"></div>
                        </a>         
                    </div>

                    <div class="item">
                        <a href="https://www.youtube.com/user/PhysiquesOfGreatness">
                            <img src="http://v017o.popscreen.com/VzFBeVBjMHhpRWMx_o_new-physiques-of-greatness-intro-25.jpg"/>
                            <div class="button"></div>
                        </a>     
                    </div>

                    <div class="item">    
                        <a href="https://www.reddit.com">
                            <img src="https://pbs.twimg.com/profile_images/459083822470946816/VGv0AGio.png"/>
                                <div class="button"></div>
                        </a>    
                   </div>
                   <div class="item">    
                        <a href="https://www.ebay.com">
                            <img src="https://pbs.twimg.com/profile_images/471350614132129793/NCDCFXva.jpeg"/>
                                <div class="button"></div>
                        </a>    
                   </div>
                    <div class="item">    
                        <a href="https://www.facebook.com">
                            <img src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png"/>
                                <div class="button"></div>
                        </a>    
                   </div>  
            </div>

    <div class="footer"></footer>
</body>

</HTML>

CSS

body {       
        margin-top:-3px;
}
.banner {
    width:100%;
    height:200px;
    background-color: rgba(64, 201, 255, 1);
    margin-left:-10px;
}

h1 { 
    font-size:80px;
    margin-left:30px;
    font-family:Futura;
    line-height:120px;
    color:rgba(255, 255, 255, 1);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
    width:100%;
    letter-spacing:1px;
    padding-top:30px;

}


h1:hover { 
    font-size:80px;
    font-family:Futura;
    color: rgba(64, 201, 255,.8);
    text-shadow: 2px 2px 3px rgba(255, 255, 255,0.9);
    width:100%;
    padding-top:30px;
}

.wrap{ 
    margin-top:20px;
    width: 100%;
    background-color: rgba(255, 190, 77, 1);
    height:200px;
    margin-left:-10px;
    overflow:auto;
}


.item {
    float:left;
    width:25%;
    padding:0px;
    margin-left: 60px;
    margin-top: 20px;


}

.item img {
    width:100%;
    padding-top:10px;
    max-height:100px;
    opacity:1;
}
.item img:hover {
    opacity:.4;
    -webkit-transform: scale(1.2);
    -moz-transform:    scale(1.2);
    -o-transform:      scale(1.2);
    -ms-transform:     scale(1.2);
}

.button {
    background-color:rgba(64, 201, 255,1);
    height:50px;
    width:100%;
    border-bottom-right-radius:.5em;
    border-bottom-left-radius:.5em;    
    transition: background-color 0.3s linear;     
}
.item:hover .button{
    background-color: rgba(255, 0, 157, 1);
    -webkit-transform: scale(1.2);
    -moz-transform:    scale(1.2);
    -o-transform:      scale(1.2);
    -ms-transform:     scale(1.2);

}

Answer 1

你的 h1 已经超过了 .banner。（特别是，h1 上的 margin-left 导致页面水平滚动）

两种解法：

让 .banner 隐藏超出其边界框的任何内容(http://jsfiddle.net/TheIronDeveloper/7zk1bbs2/3/)

.banner {
    overflow:hidden;
}

如果没有额外的样式，它看起来有点丑...

移除 h1 的左边距 (http://jsfiddle.net/TheIronDeveloper/7zk1bbs2/2/)

h1 {
    margin-left: 0;
}

但是有了这个，你失去了你尝试的填充。

或者以上的组合（我稍微清理了一下代码）：

http://jsfiddle.net/TheIronDeveloper/7zk1bbs2/4/

此外，作为 css 对 fiddle 的微小改进，当使用 {selector}:hover 时，您只需添加想要更改的 css 样式，您不需要'必须重新定义 {selector}.

中已经存在的内容

Answer 2

你改变你的 .wrap class 溢出

overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;

并更改您的 .item class 浮动

display: inline-block;

.wrap 和项目最终看起来像这样

.wrap{ 
    margin-top:20px;
    width: 100%;
    background-color: rgba(255, 190, 77, 1);
    height:200px;
    margin-left:-10px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.item {
    display: inline-block;
    width:25%;
    padding:0px;
    margin-left: 60px;
    margin-top: 20px;
}

可能你的问题已经解决了

Answer 3

只需稍加调整，您就可以检查更新后的 fiddle

enter link description here

 .wrap-in { width:2000px; }
 .item {width:200px}
 .wrap{overflow:hidden;overflow-x:scroll;width:960px}

项目 divs 的水平滚动限制在更大的 div

horizontal scrolling for item divs confined to a larger div

html

css

scroll

只需稍加调整，您就可以检查更新后的 fiddle