ul li布局问题
有个array数组，一个<div button><ul height=100px；><li> div高度数固定的,在li里面循环输出数组array，假如高度只能显示4个li，其余的不会显示，点击div里面的button可以出现第五个，而第一个li就没了，保正那框只能显示4个，这怎么实现求指点，过程中不会有滚动条的，所以不用overflow:auto，应该是用javascript实现的吧。

[解决办法]
用js改变div的scrollTop来实现，li定高，div也定高

HTML code

<style type="text/css">div.container{height:80px;width:300px;overflow:hidden;}div ul{margin:0px;padding:0px;}div li{height:20px;width:100%;overflow:hidden;}</style><div class="container" id="dv"><ul><li>11111111111</li><li>22222222222</li><li>33333333333</li><li>444444444444</li><li>55555555</li><li>6666666666</li><li>777777777777777777</li></ul></div><input type="button" onclick="move(-1)" value="上一个" /><input type="button" onclick="move(1)" value="下一个" /><script type="text/javascript">    function move(dir) {        var dv = document.getElementById('dv');        dv.scrollTop += dir * 20;    }</script>
[解决办法]
点击时移除第一个li，再添加一个li就行了吧，简单
<button type='nutton' onclick="btnclick();">点击</button>
<ul id='ul1'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<script>
function btnclick()
{
 var ul1=document.getElementById('ul1');
 var lis=ul1.getElementsByTagName("li");
 ul1.removeChild(lis[0]);
 var newli=document.createElement('li');
 newli.innerHTML='5';
 ul1.appendChild(newli);
}
</script>
[解决办法]
HTML code
<style type="text/css">html,body,div,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}#myTest{width:100px;height:80px;float:left; overflow:hidden; border:1px solid #bfbfbf;}#myTest ul{ list-style:none;}#myTest ul li{ list-style:none;height:20px;top:0px;}</style><script type="text/javascript">function scrollUp(){    var o=document.getElementById("myTest");    var step=o.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].clientHeight;//获取每次滚动的增量    o.scrollTop += step;}</script><div id="myTest">    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>        <li>8</li>    </ul></div><input type="button" value="滚动" onclick="scrollUp()"/>