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

Question

我有一个菜单：

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

我想根据需要添加多个标签，我希望将它们放在同一行。我想创建一个控件来滑动标签：

右箭头单击

左箭头单击

我该怎么做才能获得这种行为？无论元素数量多少，同一行上的所有元素......

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

如果您想最终滑动标签，则需要将<ul>放在相对定位的<div>标记中，以便设置left css值以将其移回来回。您可以在此处查看我的示例：http://jsfiddle.net/baetL/

修改
在这里，使用您的示例：http://jsfiddle.net/HrffC/1/

Answer 4

正如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按钮，它们分别用于向左和向右滚动。

Answer 5

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