列表上的水平滚动

Question

我有一个使用列表的时间线。它将显示00:00到24:00之间的时间。我需要滚动到时间轴的左侧和右侧而不显示滚动条。

<div id="timeTableMask">
    <div id="timeTableInner">

        <ul id="timeText">
            <li class="t0000"><span class="hour">0:00</span></li>
            <li class="t0015">&nbsp;</li>
                    |
            <li class="t2345">&nbsp;</li>
            <li class="t2400"><span class="hour">24:00</span></li>
        </ul>

    </div>
</div>

时间轴如下：

Answer 1

#timeTableMask {
 overflow: hidden;
  width:80px;
  border:solid 1px pink;
}
#timeTableInner {
 margin-bottom: -16px;
 overflow-x: scroll;
 overflow-y: hidden;

}
#timeTableInner ul  {
 width:320px;

}
#timeTableInner ul li {
float:left;
 width:80px;

}

<div id="timeTableMask">
    <div id="timeTableInner">
        <ul id="timeText">
            <li class="t0000"><span class="hour">0:00</span></li>
            <li class="t0015">17:00</li>
             <li class="t2345">20:00</li>
            <li class="t2400"><span class="hour">24:00</span></li>
       </ul>
</div>