怎么在CSS中移动li无序列表的小圆点 就是213前面的小圆点怎么移动到213后

html-css020

怎么在CSS中移动li无序列表的小圆点 就是213前面的小圆点怎么移动到213后,第1张

li{

list-style

:none}把默认的给去掉，然后把着了色的圆点切成一张背景图片使用；li{background:url(图点图片路径)

no-repeat}

应该把注意力放到Li里的a上边，可以这样定义li a {padding-bottom:0}li a:hover {padding-bottom:5px}当然这样定义会时整个部分产生位移，你可以事先定义 li 以及 a 的高度li {height:25px}li a {height:20px}li a:hover {height:20pxpadding-bottom:5px}这样就不会影响其他部分了

其实是他父级 UL 移动了几个像素

一般LI是跟着UL的，代码如下：

<ul>

 <li>...</li>

 <li>...</li>

 <li>...</li>

</ul>

然而 UL 自己是有默认属性的（就是你感觉他移动了几个像素），但不同的浏览器有不同的属性，以webkit类浏览器为例，UL的默认属性是：

display: block /* UL是块元素，这个不解释了 */

list-style-type: disc /* UL默认的列表样式，就是每一个LI之前会有一个点，这也是为什么UL会有几个像素移出来，就是让这些点不被LI内容遮挡 */

-webkit-margin-before: 1em /* 这里就是处理UL 移动的距离 */

-webkit-margin-after: 1em

-webkit-margin-start: 0px

-webkit-margin-end: 0px

-webkit-padding-start: 40px  /* 这里是处理UL 内容偏移的距离 */

但是不是所有需求都是需要这种效果，所以你只需把这个默认样式覆盖掉就OK了，例如：

ul ,ul li{

    list-style:none

    margin:0

    padding:0

    display:block /* add it if you want */

    overflow:hidden /* add it if you want */

}