2012-11-23 58 views
-1

只使用CSS,我需要使暗箱(鏈接)在一個不間斷的行中排列起來,並且對於容器(臨時命名爲div.hurrdurr),當鏈接線長度超過它時,會有一個水平滾動條。我也不想在滾動時留下空間。據我所知,鏈接將被動態更改,所以我不能使用設置的寬度。爲水平滾動框強制一個非破壞線?

我只需要這在最新的Firefox瀏覽器,因爲這是我將使用在頁面中顯示的唯一的事。

這是我有:

<!DOCTYPE html> 
<html style="width: 1000px;"> 
    <head> 
     <title>Hurrr</title> 
     <style> 
      div.contain { 
       background-color: #999999; 
       height: 90px; 
       width: 100%; 
      } 
      div.hurrdurr { 
       background-color: #CCCCCC; 
       white-space: nowrap; 
       width: 100%; 
       overflow: auto; 
      } 
      div.hurrdurr a { 
       width: 60px; 
       height: 20px; 
       margin-right: 8px; 
       margin-top: 4px; 
       background-color: #333333; 
       color: #CCCCCC; 
       text-align: center; 

       float: left; 
       display: inline-block; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="contain"> 
      <div class="hurrdurr"> 
       <a class="durr">1/25</a> 
       <a class="durr">2/25</a> 
       <a class="durr">3/25</a> 
       <a class="durr">4/25</a> 
       <a class="durr">5/25</a> 
       <a class="durr">6/25</a> 
       <a class="durr">7/25</a> 
       <a class="durr">8/25</a> 
       <a class="durr">9/25</a> 
       <a class="durr">10/25</a> 
       <a class="durr">11/25</a> 
       <a class="durr">12/25</a> 
       <a class="durr">13/25</a> 
       <a class="durr">14/25</a> 
       <a class="durr">15/25</a> 
       <a class="durr">16/25</a> 
       <a class="durr">17/25</a> 
       <a class="durr">18/25</a> 
       <a class="durr">19/25</a> 
       <a class="durr">20/25</a> 
       <a class="durr">21/25</a> 
       <a class="durr">22/25</a> 
       <a class="durr">23/25</a> 
       <a class="durr">24/25</a> 
       <a class="durr">25/25</a> 
      </div> 
     </div> 
    </body> 
</html> 
+0

你應該總是考慮發佈你的代碼(或至少部分)與你的問題。 –

回答

0

刪除您float:leftdiv.hurrdurr a和應該給你滾動。

+0

非常感謝。 我一直在搜索幾個小時,嘗試不同的事情。幾乎我讀過的每一篇文章都說「float:left;'是解決方案。我想我沒有想到它應用到了什麼地方。 再次;謝謝。你讓我很快樂。 – TanzNukeTerror

+0

不客氣,很高興我能提供幫助。 – AndyWarren