jQuery Slider 不会在换行符上选取元素

Question

嗨，我有一个基本的jQuery滑块，我想使用箭头滑动很多年。首先，我希望隐藏任何溢出，这不符合我的要求。

我期待<ul class="yearslist">上的overflow:hidden隐藏下一行的溢出，但这似乎不起作用，而是其他 li 元素如下所示。

无论如何，当滑块从左向右移动时，它不会在移动时在顶线上显示年份。

希望有任何帮助来完美地完成这项工作！

我已经创建了一个简单的jsFiddle或查看下面的代码：

索引.html

<div class="sixteen columns" id="years">
        <div id="years_arrows">
            <span class="nav_arrows" id="NavigateBackward"><img src="http://www.designofsignage.com/application/symbol/building/image/600x600/arrow-left-circle.jpg"/></span>
         <span class="nav_arrows aaa" id="NavigateForward"><img src="http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg" /></span>
       <div id="slider">
        <div id="yearslistwrapper">
                <ul class="yearslist">
                    <li><a href="#">2003</a></li>
                    <li><a href="#">2004</a></li>
                    <li><a href="#">2004</a></li>
                    <li><a href="#">2005</a></li>
                    <li><a href="#">2006</a></li>
                    <li><a href="#">2007</a></li>
                    <li><a href="#">2008</a></li>
                    <li><a href="#">2009</a></li>
                    <li><a href="#">2010</a></li>
                    <li><a href="#">2011</a></li>
                    <li><a href="#">2012</a></li>                       
                    <li><a href="#">2013</a></li>
                </ul> <!-- END UL yearslist -->
            </div> <!--End slider-->
                            </div> <!-- End years_arrows div -->

风格.css

#years {
    background-color:#CCC;
    height:50px;
    word-spacing:100px;
}
#yearslistwrapper, .yearslist {
    padding-top:10px;
    overflow:hidden;
}
.yearslist {
    overflow:hidden;
    display:inline; 
}
.yearslist li {
 display:inline;   
}
}
.yearslist a {
    color:#000; 
    text-decoration:none;
    cursor:pointer;
    font-size:20px;
    font-weight:bold;
}
.yearslist a:hover {
    text-decoration:underline;
}
/** BG For Span on Nav Arrows **/ 
.nav_arrows { 
    height:100%;
    max-width:5%;
}
#years_arrows {
    width:100%;
    height:100%;
}
#years_arrows img {
    width:50%;
    height:70%;
    padding-top:10px;
}
#NavigateBackward {
    float:left;
}
#NavigateForward {
    float:right;
}

JS.js

// SLIDE YEARS
$(document).ready (Initialize);
function Initialize(){
    InitList();
}
var moveLeft = false;
var moveRight = false;
var left = function() {
    if (moveLeft)
        $(".yearslist").animate({ "marginLeft": "-=5px" }, 50, 'linear', left);
};
var right = function() {
    if(moveRight)
        $(".yearslist").animate({ "marginLeft": "+=5px" }, 50, 'linear', right);
};
function InitList() {
    $("span#NavigateBackward").hover(
        function() { moveLeft=true; left(); },
        function() { moveLeft=false; }
    );
    $("span#NavigateForward").hover(
        function() { moveRight=true; right(); },
        function() { moveRight=false; }
    );
}

Answer 1

对，

我解决了这个问题。

我所做的是添加CSS属性white-space: nowrap;

.年列表 { 溢出：隐藏; 显示：内联; 空白：无换行;}

或查看 jsFiddle