简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

平鋪佈局中帶有水平滾動的按鈕

<p>我有很多按鈕以瓷磚佈局垂直滾動，就像這樣：</p> <p> <pre class="brush:html;toolbar:false;"><style> .tile-button { width:33.3%; height:100px; background-color: lightblue; border: solid 1px gray; white-space: normal; maring: 0px; } </style> <body style="margin: 0;"> <div style="width:100%;height:300px;background-color: coral;overflow-y: scroll;font-size:0px;"> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <button class="tile-button">標題</button> <div> </body></pre> </p> <p>現在我需要做同樣的事情，但只有水平滾動。 有人可以幫我嗎？ 非常感謝</p>
P粉823268006P粉823268006437 天前553

全部回覆(2)我來回復

  • P粉060528326

    P粉0605283262023-09-01 14:46:59

    只需在容器DIV中加入此CSS程式碼 'white-space:nowrap;'。 

    <div style="width:100%;height:300px;background-color: coral;overflow-y: scroll;font-size:0px;white-space:nowrap; ">

    回覆
    0
  • P粉156415696

    P粉1564156962023-09-01 10:50:41

    我找到了解決方案：

    <style>
/* webkit, per chrome, edge, safari */
::-webkit-scrollbar {
    height: 12px;
    width: 5px;
    background: #aaa;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

/* per firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #393812 #aaa;
}

.container {
  width: 100%; 
  height: 300px; 
  border: 1px solid green;
  overflow-x: scroll;
  overflow-y: hidden;
  font-size:0px;
}

.inner {
  height: 100%;
  white-space:nowrap; 
}

.floatLeft {
  width: 150px;
  margin:0px; 
  display: inline-block;
}

button {
  height: 94px;
  width: 150px;
  margin: 0px;
  border: solid 1px gray;
}
</style>

<div class="container custom-scrollbar">
   <div class="inner">
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
       <div class="floatLeft">
         <div>
           <button>Cap1</button>
         </div>
         <div>
           <button>Cap2</button>
         </div>
         <div>
           <button>Cap3</button>
         </div>
       </div>
   </div>
</div>

    回覆
    0
  • 取消回覆