2014-03-27 24 views
0

我有這樣的:如何才能使div滾動只水平?

My HTML and CSS

我希望它只是水平滾動......我該怎麼辦呢?

HTML

<div id="boxchap"> 
    <h3>Chap~</h3> 
    <div id="center"> 
     <div id="fulllist"> 
     <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 17</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 16</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 15</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 14</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 13</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 12</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 11</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 10</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 9</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 8</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 7</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 6</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 5</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 4</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 3</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 2</a> 
     </div> 
      <div id="boxchap" class="listchap"> 
      <a href="#">Mujaki no Rakuen – Chap 1</a> 
     </div 
      </div> 
    </div> 
</div> 

CSS

#boxchap {margin-bottom : 140px;} 
#boxchap .listchap {width : 230px;margin:0px 1px 0px 0px ;padding: 3px;float: left;border: 1px solid #A8A8A8;} 
#center {margin-left:auto; margin-right:auto;width: 100%;padding-left: 3%;} 
#fulllist {min-width:100%; height:140px;} 

回答

0

下面的代碼添加到您的CSS類:#boxchap

overflow: auto; 
overflow-y: hidden; 

現在,應該是滾動的水平。

您可能還需要增加對IE8:

-ms-overflow-y: hidden; 
0

添加以下代碼到你的CSS類:#boxchap

overflow: auto; 
overflow-x: hidden; 
+0

很抱歉,但我的意思是...水平@ – user3468742

+0

水平user3468742滾動只知道你現在有..? –