li标签在点击之后为什么会位置上移？

Question

*{

margin:0;

padding:0;

}

#warp{

width:600px;

height:500px;

/*border:1px solid red;*/

margin:auto;

}

.pic{

width:500px;

height:300px;

margin-left:50px;

position:relative;

z-index:-1;

}

#text{ 

width:200px;

height:40px;

margin:40px auto;

padding:0px;

}

ul{

width:200px;

height:40px;

margin:-80px 55px;

padding:0px;

border:1px solid red;

}

li{

width:20px;

height:20px;

float:left;

color:#1b242b;

margin-left:20px;

cursor:pointer;

}

<div id="text">

<ul>

<li onclick="playPic(0)">1</li>

<li onclick="playPic(1)">2</li>

<li onclick="playPic(2)">3</li>

<li onclick="playPic(3)">4</li>

<li onclick="playPic(4)">5</li>

</ul>

</div>

之前可能没说明白：就是我现在想用li标签前面的小圆点来表示图片切换的按钮，但是现在点击li标签之后位置会上移一点点，不明白是哪里出错了所以过来求助大家！

下图是没点击第一个li标签的效果：

下面这个图则是点击了li标签之后的效果：

可以看到红色的框整个都上移了一点点的位置，所以现在想来问问为什么会点击之后发生这样的事？

求助各位，谢谢！

Answer 1

第一点：你需要自学css定位问题。第二点：你要考虑使用什么来实现图片轮播。比如：javascript或者jquery。

Answer 2

js代码呢？