首页 新闻 搜索 专区 学院

求助,如何去掉Li 数字后面的小数点呢?

0
悬赏园豆:50 [已解决问题] 解决于 2013-05-17 10:11

如题,如何去掉Li 数字后面的小数点呢,实现类似于:  http://www.chinanews.com/tw/2013/05-15/4821931.shtmlul右侧的“新闻排行”的样式,CSs该如何修改
1、HTML:

 

                <ul class="MenuUl">
                        <li>关于我们 </li>
                        <li>联系我们</li>
                        <li>加入我们</li>
                        <li>商业规则</li>
                        <li>服务理念</li>
                        <li>隐私声明</li>
                    </ul>

2、CSS

 

ul

{ margin: 15px 0px 0px 15px;
    color: #000000;   
}
 ul li
{
    width:115px;
    margin: 0px 0px 0px 25px;
    text-align: left;
    list-style-type:decimal;

 

    line-height: 1.8em;
    font-size: 12px;   
}

WesternWind的主页 WesternWind | 初学一级 | 园豆:7
提问于:2013-05-15 20:52
< >
分享
最佳答案
0

用伪对象 content和伪类 实现,http://www.tystudio.net/2013/04/15/css3-order-list/ 这个教程应该可以解决你的问题

收获园豆:20
天屹 | 初学一级 |园豆:112 | 2013-05-17 08:33

嗯,非常好,太正确啦,最好的解决方案。!

WesternWind | 园豆:7 (初学一级) | 2013-05-17 09:58

@WesternWind: 这是css3,可能IE兼容性方面会有问题

nehnre | 园豆:217 (菜鸟二级) | 2013-05-17 10:19
其他回答(4)
0

li { list-style: none; }

收获园豆:15
nehnre | 园豆:217 (菜鸟二级) | 2013-05-15 21:17

@WesternWind: 你木有看懂我的意思吧,请查看:

 

http://www.chinanews.com/tw/2013/05-15/4821931.shtmlul

右侧的“新闻排行”

支持(0) 反对(0) WesternWind | 园豆:7 (初学一级) | 2013-05-15 21:27

@WesternWind: 新闻排行的数字是父DIV的背景图片:http://www.chinanews.com/fileftp/2008/12/2008-12-30/U76P4T47D10067F977DT20081230234629.jpg;然后将LI的点去掉使用的就是li { list-style: none; }

支持(0) 反对(0) nehnre | 园豆:217 (菜鸟二级) | 2013-05-15 21:30

@nehnre:能不能这样实现 

ul li
{
    width:115px;
    margin: 0px 0px 0px 25px;
    text-align: left;
    list-style-type:decimal;
    list-style-position:inside;
    list-style-image:url("images/arrow.gif");


    line-height: 1.8em;
    font-size: 12px;   
}

  其中,这个图片images/arrow.gif 是每个数字后面的小图片

支持(0) 反对(0) WesternWind | 园豆:7 (初学一级) | 2013-05-15 21:37

@WesternWind:这是我将li { list-style: none; }属性去掉的效果

 

支持(0) 反对(0) nehnre | 园豆:217 (菜鸟二级) | 2013-05-15 21:37
0

你要的是这效果吗?这个可是背景图片。

收获园豆:15
yyutudou | 园豆:997 (小虾三级) | 2013-05-15 21:29

嗯 是的 ,但是我设置: list-style-type:decimal;  list-style-image:url("Images/arrow.gif") ,可是我的数字后面有一个小句点,该如何处理呢?!

支持(0) 反对(0) WesternWind | 园豆:7 (初学一级) | 2013-05-15 21:31

@WesternWind: 建议不要这样用,一来是兼容性问题,二来去掉那个小点看来是件麻烦事。还是在程序生成的时候动态输出就行。

支持(0) 反对(0) yyutudou | 园豆:997 (小虾三级) | 2013-05-15 22:01
0

li 有个属性 list-style  改为none  就没有点了.

只会造轮子 | 园豆:2274 (老鸟四级) | 2013-05-16 10:17
0

 list-style:none

SpeakHero | 园豆:45 (初学一级) | 2013-06-16 01:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册