效果：点击右侧三角形按钮，滚动显示隐藏的剧集菜单；

实现思路：设置子元素超出部分不显示且不换行，点击按钮时，使用js设置其父级元素的相对位置，使其横向偏移即可显示超出的元素。

HTML：

   起初html代码如下，即 h3 标签父级元素只有一层，这时若对 <div class="seasonitem"> 设置css样式“超出部分隐藏且不换行”，只能将超出<div class="seasonitem">的h3元素隐藏，但并不能达到强制不换行的结果。原因：h3为块级元素，对其设置强制不换行无效。因为换行，这时即使点击后滚动，也并不能使超出部分显示。

    <span class="rightBtn">◂</span>
            <div class="seasonitem">
                <h3 onclick="Ajxseason(this)" id="11">第11季▼</h3>
                <h3 onclick="Ajxseason(this)" id="10">第10季</h3>
                <h3 onclick="Ajxseason(this)" id="9">第9季</h3>
                <h3 onclick="Ajxseason(this)" id="8">第8季</h3>
                <h3 onclick="Ajxseason(this)" id="7">第7季</h3>
                <h3 onclick="Ajxseason(this)" id="6">第6季</h3>
                <h3 onclick="Ajxseason(this)" id="5">第5季</h3>
                <h3 onclick="Ajxseason(this)" id="3">第3季</h3>
                <h3 onclick="Ajxseason(this)" id="2">第2季</h3>
                <h3 onclick="Ajxseason(this)" id="0">合集</h3>
                <h3 class="curseason" id="-1">其它</h3>
            </div>
   <span class="leftBtn">▸</span>

解决方法：在<div class="seasonitem"> 外层添加一层父级元素<div class="seasondiv">,然后对其设置css样式“超出部分隐藏且不换行”，并使 <div class="seasonitem">宽度尽可能长，保障其子元素无需换行，即可达到预期效果。

    <span class="rightBtn">◂</span>
        <div class="seasondiv">
            <div class="seasonitem">
                <h3 onclick="Ajxseason(this)" id="11">第11季</h3>
                <h3 onclick="Ajxseason(this)" id="10">第10季</h3>
                <h3 onclick="Ajxseason(this)" id="9">第9季</h3>
                <h3 onclick="Ajxseason(this)" id="8">第8季</h3>
                <h3 onclick="Ajxseason(this)" id="7">第7季</h3>
                <h3 onclick="Ajxseason(this)" id="6">第6季</h3>
                <h3 onclick="Ajxseason(this)" id="5">第5季</h3>
                <h3 onclick="Ajxseason(this)" id="3">第3季</h3>
                <h3 onclick="Ajxseason(this)" id="2">第2季</h3>
                <h3 onclick="Ajxseason(this)" id="0">合集</h3>
                <h3 class="curseason" id="-1">其它▼</h3>
            </div>
        </div>
        <span class="leftBtn">▸</span>

CSS：

.seasondiv{
  float:left;
  width:920px;
  height:56px;
  white-space:nowrap;
  overflow:hidden;
}
.seasonitem{
  float:left;
  width:3000px;
  height:56px;
  white-space:nowrap;
  overflow:hidden;
}
.leftBtn{
  width:50px;
  height:56px;
  float:right;
  font-size:20px;
  line-height: 56px;
  text-align: center;
  cursor:pointer;
  margin-right:20px;
}
.rightBtn{
  width:50px;
  height:56px;
  float:left;
  font-size:20px;
  line-height: 56px;
  text-align: center;
  cursor:pointer;
  display:none;
}

JS：

<script type="text/javascript">
jQuery(document).ready(function () {
    //向左按钮点击事件
    var index = 0;
    var liLen;
    $(".leftBtn").click(function(){
        index++;
        liLen = $(".seasonitem h3").length;
        if(index >= 4)
        {
            $(".seasonitem").stop();
	    $(".rightBtn").show();
            index = 3;
        }else{
            if(index == 1)
            {
                $(".seasonitem").animate({"margin-left":-index*90},970);
            }else{
                $(".seasonitem").animate({"margin-left":-index*90},970);
            }
        }
    });
    //向右按钮点击事件
    $(".rightBtn").click(function(){
        if(index == 0)
        {
            $(".seasonitem").stop();
        }else{
            index--;
            if(index == 0)
            {
                $(".seasonitem").animate({"margin-left":-index*90},970);
            }else{
                $(".seasonitem").animate({"margin-left":-index*90},970);
            }
        }
    });
});
</script>