今天遇到的position定位的小问题

2019独角兽企业重金招聘Python工程师标准>>>

       今天做页面布局的时候，我要写一个星级选择的控件，如图：

     我首先定义了一个wrapper来定位，让它position为relative，然后里面存放一个存放颜色的div和整个星星的图片DIV，星星图片如图：

   星星的展示实际上就是利用存放颜色的div的宽度来控制，如总共5星，现在展示3星，那么颜色div的宽度就为60%。

   PS：颜色DIV和图片DIV都为position:absolute;

   颜色展示完成之后，就是鼠标移动到上面去可以选择星星的个数，这个我是通过一个ul实现的，ul的位置和整个图片DIV一样，ul中间每个li的宽度和每个星星的宽度相同，然后利用代理ul这个元素实现li的选取，如选择了第二个Li,就代表选择2星，然后改变颜色DIV的宽度。

    ul这个地方今天遇到了一点问题，就是Position:absolute定位的时候一直不正常，正常情况下我希望它和图片DIV重合，结果它一直在下面，找了很久，终于发现原来chrome中有这样一个：

 

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

    原来chrome定义了UL的margin和padding，而我在自己的控件中没有指定padding和margin，坑爹啊真是。。。

     现定义规则：

      

padding:0;
margin:0;

     正常了，好，记录完成，手工，继续码起！！！

 

转载于:https://my.oschina.net/mingtingling/blog/121952