如何将无限数量的元素放在同一行上？

问题描述：

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

我希望把尽可能多的标签，因为我需要的，我想，让他们在同一行。我想创建一个控制滑动标签：

tab02 向右箭头点击

tab01 左键单击

我有什么做的CSS得到这个行为？就不管元素的数量的同一行的所有元素...

An example of my problem on jsFiddle

答

我看到你正在尝试做的，如果你是浮动的贵丽的，你会发现他们被他们的容器包裹并溢出到下一行。要解决这个问题，你需要使用下面的代码：

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

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

希望这有助于队友！

答

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

答

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

答

如果你想最终滑动的标签，你会希望把<ul>在一个相对定位<div>标记，以便您可以设置left CSS值将其前后移动。你可以看到我的例子在这里：http://jsfiddle.net/baetL/

编辑
这里，使用例如：http://jsfiddle.net/HrffC/1/

答

正如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。

如何将无限数量的元素放在同一行上？

相关推荐