同じ行に要素を無制限に置く方法は？

Question

私がメニューを持っている：

<ul> 
    <li>Tab 01</li> 
    <li>Tab 02</li> 
    <li>Tab 03</li> 
    <li>Tab 04</li> 
</ul> 

は、私は必要な数のタブを置きたい、と私は同じ行にそれらを維持したいです。私は、タブをスライドさせる制御を作成したい：

右矢印

左矢印は、私はこの動作を取得するためにCSSで行う必要があります

をクリックしてクリック！かかわらず、要素数の同じライン上のすべての要素...私はあなたがやろうとしているものを見ると、あなたの李さんを浮遊している場合は、あなたが見つける

An example of my problem on jsFiddle

Answer 1

彼らはコンテナで包まれて次の行にこぼれ落ちることになります。この問題を回避するには、次のコードを使用する必要があります。

#container{ 
overflow:hidden; 
white-space: nowrap;/*prevents wrapping*/ 
} 

li{ 
display:inline-block; 
zoom:1; *display: inline;/*IE7 Fix for inline-block*/ 
} 

これが仲間に役立つことを望みます。

W.

Answer 2

ul { width: 800px; overflow: hidden; } 

Answer 3

html,body {width:100%;height:100%;border:0;margin:0;} 
ul {width:100%; position:relative;} 

Answer 4

あなたが最終的にタブをスライドさせたい場合は、あなたが前後に移動するためにleft CSS値を設定することができるように、相対位置<div>タグで<ul>を入れたいと思うでしょう。あなたの例を使用して、http://jsfiddle.net/baetL/

編集ここ
とを：あなたがここに私の例で見ることができますhttp://jsfiddle.net/HrffC/1/

Answer 5

wilsonpageが言ったように、

• オーバーフロー：隠されました; （コンテナの外にあるコンテンツを隠すために使用されます）
• white-space：nowrap; （<br>までコンテンツを同じ行に続けるために使用）

は、あなたが望むものを達成するために使用されます。

それに加えて、ボタンをクリックして要素をスクロールするには、いくつかのjqueryを使用する必要があります。

同じコードが以下のスニペットに含まれています。ここ

$('#scroll_left').click(function() { 
 
    var leftPos = $('div.list_Items').scrollLeft(); 
 
    console.log(leftPos); 
 
    $("div.list_Items").animate({ 
 
     scrollLeft: leftPos - 230 
 
    }, 800); 
 
}); 
 

 
$('#scroll_right').click(function() { 
 
    var leftPos = $('div.list_Items').scrollLeft(); 
 
    console.log(leftPos); 
 
    $("div.list_Items").animate({ 
 
     scrollLeft: leftPos + 230 
 
    }, 800); 
 
});

.container { 
 
    padding-bottom:5px; 
 
    border-bottom: 1px solid black; 
 
    width:310px; 
 
} 
 
.list_Items { 
 
    width:230px; 
 
    float:left; 
 
    overflow:hidden; 
 
    margin-right:20px; 
 
} 
 
.tabs { 
 
    margin: 0 0 10px; 
 
    padding: 0 0 4px; 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
} 
 
.tabs li { 
 
    background: #D1E2F3; 
 
    border: 1px solid #fff; 
 
    display: inline-block; 
 
    font-family: arial; 
 
    font-size: 11px; 
 
    color: #227799; 
 
    padding: 3px 10px; 
 
} 
 
.tabs li a, .tabs li a:hover { 
 
    text-decoration: none !important; 
 
    font-size: 11px; 
 
    color: #666; 
 
} 
 
.tabs li.title { 
 
    background: none; 
 
    border: 0; 
 
} 
 
.tabs li.active { 
 
    background: #092B44; 
 
    border: 1px solid #092B44; 
 
    color: white; 
 
} 
 
.tabs li.active a { 
 
    color: #fff !important 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="list_Items"> 
 
     <!-- The width is limited --> 
 
     <ul class="tabs"> 
 
      <li class="active">List-Item-1</li> 
 
      <li>List-Item-2</li> 
 
      <li>List-Item-3</li> 
 
      <li>List-Item-4</li> 
 
      <li>List-Item-5</li> 
 
      <li>List-Item-6</li> 
 
      <li>List-Item-7</li> 
 
      <li>List-Item-8</li> 
 
      <li>List-Item-9</li> 
 
      <li>List-Item-10</li> 
 
     </ul> 
 
    </div> 
 
    <button id="scroll_left">&lt;</button> 
 
    <button id="scroll_right">&gt;</button> 
 
</div>

、私はそれぞれ左右にスクロールするために使用されているIDがscroll_leftとscroll_rightを持つ2つのボタンを使用していました。