如何將無限數量的元素放在同一行上？

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

如果你想最終滑動的標籤，你會希望把<ul>在一個相對定位<div>標記，以便您可以設置left CSS值將其前後移動。你可以看到我的例子在這裏：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>

在這裏，我用兩個按鈕與IDS scroll_left和左，右分別被用於滾動scroll_right。