CSS漂浮在同一行變量的數量

Question

我想要水平列表可以運行儘可能寬，但在固定寬度的容器內。我使用jQuery來允許在真正廣泛的列表上滾動，並且溢出：對於沒有javascript的用戶來說是自動的。

我沿着這行代碼：

<div class="list"> 
    <ul> 
     <li class="feed"> 
      <section> 
       <h1><span class="name">Title</span></h1> 
       <div class="scroll_left"><a class="ir" href="#">Scroll Back</a></div> 
       <div class="article_list"> 
        <ul class="article_list"> 
         <li> 
          <a href="article.php"> 
           <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
           <h2>Title of article</h2> 
          </a> 
         </li> 
         <li> 
          <a href="article.php"> 
           <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
           <h2>Title of article</h2> 
          </a> 
         </li> 
         <li> 
          <a href="article.php"> 
           <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
           <h2>Title of article</h2> 
          </a> 
         </li> 
         <!-- variable number of li's, from 10s to 100s --> 
        </ul> 
       </div> 
      </section> 
     </li> 
     <!-- More of these lists --> 
    </ul> 
</div> 

我只是給我的CSS的一個子集，我認爲是相關的：

.feed .article_list { 
    position: relative; 
    overflow: auto; 
    float: left; 
    width: 900px; 
} 

.feed .article_list ul { 
    position: relative; 
    width: 10000px; /** I want this to be wide, but not allow scrolling past the end*/ 
    margin: 0; 
    background-color: #ffffff; 
} 

.feed .article_list li { 
    display: block; 
    width: 130px; 
    height: 150px; 
    position: relative; 
    float: left; 
    border-right: 2px solid #b5e8f4; 
    border-left: 2px solid #b5e8f4; 
    margin: 0 5px 0 0; 
} 

我的JavaScript：

$(document).ready(function() { 
    $('div.article_list').css({ 
     'overflow' : 'hidden' 
    }); 

    $('.scroll_left a').click(function() { 
     toScroll = $(this).parent().next(); 
     toScroll.animate({scrollLeft: "-=135"}); 
     return false; 
    }); 

    $('.scroll_right a').click(function() { 
     toScroll = $(this).parent().prev(); 
     toScroll.animate({scrollLeft: "+=135"}); 
     return false; 
    }); 

}); 

因此，我要麼必須使內部ul真的很寬，這樣用戶就可以滾動到列表項以外，或者我可以restri ct它，但如果我添加太多項目（動態，所以我沒有太多的控制），然後佈局中斷。

我可以以某種方式讓該可滾動區域與其浮動內容一樣寬嗎？ 或者是在javascript中設置寬度的唯一解決方案（不太理想，但我可以這樣做）？

Answer 1

它的float: left在.feed .article_list，你真的不想要，但我已經把它從所有他們，我可以。

我會移動到內聯設置，而不是浮動的：

.feed .article_list { 
    position: relative; 
    overflow: auto; 
    width: 100%; /* specify what ever width you want. I think 100% is proper. */ 
} 

.feed .article_list ul { 
    position: relative; 
    overflow-x: scroll; 
    margin: 0; 
    background-color: #ffffff; 
    white-space: nowrap; 
} 

通過使overflow-x: scroll你有一個永久的滾動條（不完全必要的，它可以，如果你喜歡被移除）。該white-space: nowrap將保持孩子在一行（而不是浮動。）

.feed .article_list li { 
    display: inline-block; 
    // etc. etc. etc. ... 

對孩子display: inline-block;會讓你指定一個像塊元素的高度/寬度，並在同一時間讓他們在線。

的jsfiddle： -http://jsfiddle.net/GBtCb/

更新： -

在努力使其跨瀏覽器兼容做如下修改： 的overflow: auto從.feed .article_list 刪除和添加：

.feed 
{ 
    overflow: hidden; 
} 
.article_list 
{ 
    overflow: auto; 

from quirksmode.com：

• http://www.quirksmode.org/css/whitespace.html：white-space: nowrap是兼容的IE7 +。
-