javascript - 如何构建滑动水平菜单。 CSS

Question

我正在尝试构建一个简单的 slider ，它由一个静态“窗口”和可移动的元素列表组成。

其中父容器只显示一项并隐藏所有其余项。我试图做这样的事情，但似乎这是错误的:

<div id="category-selector">
    <div class="categories-list clearfix">
        <a class="category">sports</a>
        <a class="category">fashion</a>
        <a class="category">health</a>
    </div>
</div>

#category-selector {
    width: 300px; margin: 0 auto; position: relative; z-index: 1;
    border: 2px solid #ccc;
   -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 55px;
    overflow: hidden;
}
.categories-list {
    position: absolute; top: 0; left: 0; display: block;
}
a.category {
    display: block; float: left; width: 100%; padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

如何实现此功能？

Answer 1

试试这个:

.categories-list {
    display: block;
    white-space: nowrap;

    /*margin-left: -300px;*/
}
a.category {
    display: inline-block; 
    width: 280px; 
    padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

如果你想让链接从左到右排列，你应该将它们设置为固定宽度。如果您设置 100%，那么他们将始终尝试填充容器。将 display 设置为 inline-block 允许我们通过在容器上设置 white-space: nowrap; 来避免换行。要滚动它，只需在容器上设置边距，例如 margin-left: -300px;

工作样本:http://jsfiddle.net/N9R2E/

或者你可以试试这个:

.categories-list {
    display: block;
    white-space: nowrap;
    margin-left: -300px;
    width: 10000px; /* long enough to fit all links */
}
a.category {
    display: block; 
    float:left;
    width: 280px; 
    padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

这与您的尝试一样使用 display:block 和 float:left ，但宽度是固定的。要将所有链接放在一行中，categories-list 必须比所有链接在一起的宽度都大。

工作样本:http://jsfiddle.net/N9R2E/3/