CSSが同じ行に浮動する変数量

Question

可能な限り幅広いが、固定幅のコンテナ内で実行できる水平リストを作成したい。私はjQueryを使って、本当に広いリストをスクロールできるようにしています。

私はこの線に沿ってコードを持っている：私はちょうど私が思う私のCSSのサブセットをあげる

<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> 

は関連性がある：

.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を非常に広くする必要があるため、ユーザーはリスト項目を超えてスクロールしたり、再作成することができます私はあまりにも多くの項目を（動的には、私は多くの制御を持っていないので）、レイアウトが壊れて追加してください。

私は何とかスクロール可能な領域を浮動小数点のコンテンツと同じ幅にすることはできますか？ また、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は、1行に子供を保つ（代わりの浮き。）ウィル

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

を子どもたちにdisplay: inline-block;あなたがブロック要素のような高さ/幅を指定でき、同時にインラインそれらを維持します。

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

UPDATE： -

それはクロスブラウザ互換性を持たせるための努力には次のように変更します。 .feed .article_list からoverflow: autoを削除し、追加します。

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

quirksmode.com：

• http://www.quirksmode.org/css/whitespace.html：white-space: nowrapはIE7 +と互換性があります。
-