的jsfiddle項目的div水平滾動：http://jsfiddle.net/7zk1bbs2/的侷限較大DIV

如果你看的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); 

}

來源

2015-01-02 RoseHaggar

寬度容器的'wrap'應該等於總結項目的寬度。 – slash197

你改變你的.wrap類洋溢着

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

與

display: inline-block;

.wrap和項目更改.item級浮法最終這個樣子的

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

五月是你的問題解決了

來源

2015-01-02 09:14:46 Aditya

-1

你的H1出血過去.banner。（尤其是保證金留在H1導致網頁得到一個水平滾動）

兩種解決方案：

具有超出其邊框（http://jsfiddle.net/TheIronDeveloper/7zk1bbs2/3/）

的.banner掩飾什麼

.banner { 
    overflow:hidden; 
}

它看起來沒有額外的造型醜......

卸下左側瑪格從H1（http://jsfiddle.net/TheIronDeveloper/7zk1bbs2/2/）

h1 { 
    margin-left: 0; 
}

但有了這個，你失去你試圖填充。

還是上面（我清理代碼略）的組合：

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

此外，使用{selector}:hover當你的小提琴，輕微的CSS改進，你只需要添加你想改變的css風格，你不必重新定義已經存在的{selector}。

來源

2015-01-02 07:48:11 TheIronDeveloper

有了小的調整，你可以做這個檢查更新的小提琴

enter link description here

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

來源

2015-01-02 09:17:27

的侷限較大DIV

回答

有了小的調整，你可以做這個檢查更新的小提琴

相關問題