首页 新闻 会员 周边

求助，如何去掉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
test1123123 | 初学一级 |园豆：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 | 园豆：31 (初学一级) | 2013-06-16 01:17
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。