Chinaunix首页 | 论坛 | 博客
  • 博客访问: 119371
  • 博文数量: 51
  • 博客积分: 705
  • 博客等级: 上士
  • 技术积分: 459
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-23 15:44
文章分类

全部博文(51)

文章存档

2015年(4)

2014年(12)

2013年(21)

2012年(14)

我的朋友

分类: IT职场

2012-04-13 09:21:03


今天在修改一个网站样式时,遇到一个问题,无论怎么调节css属性,一个文章列表图标却一直不显示,最后把list-style-position:outside改成list-style-position:inside时,列表图标显示出来了。为了找出list-style-position:outside不显示的原因,不断的尝试删除各种css属性来找出导致outside不显示的原因,结果却始终没有找出来一个确定的答案,不过肯定的是,ul li属性width:100%、padding:0;会对列表图标不显示造成一定的影响,如果你遇到这个问题,请注意这两个属性。
css2.0手册对outside和inside这两个参数是这样解释的:
list-style-position : outside | inside
取值:
outside:默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
从上面的定义可以看出padding还是有影响的,不过我这里具体是哪里出了问题却一直找不出来,删除除width:100%或者padding:0之外的其它样式,均可以达到显示的效果。
问题就这样告一段落,由于样式需要,我把list-style-type取decimal阿拉伯数字这个值,当为了满足列表行超出时不自动换行这一需求时,采用了如下三个参数:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
不过发现列表不以阿拉伯数字来显示了,全变成了数字1。当把overflow:hidden删掉时,问题解决了,不过省略号出不来了,于是又学到一个hack,以后得注意了。
 
阅读(860) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~