和谐的小三角裤

关于列表项标记(一般就是li前面的点或者小三角裤),我们通常都是做成图片的,这样比较方便控制。那不用图片可不可以呢?当且仅当列表图片为方形、三角形的时候还是有一定可行性的,比如这样:

css:

ul {
    position:relative;
    margin:10px auto;
    padding:10px;
    width:230px;
    border:1px solid #DDD;
    font-size:12px;
    overflow:hidden;
}
li {
    position:relative;
    clear:both;
    float:left;
    width:220px;
    margin:0.75em 0;
    width:0;
    height:3px;
    border-left:3px double #333;
}
ul li:after {
    content:"";
    display:block;
    clear:both;
    height:0;
    zoom:1;
    visibility:hidden;
}
li a {
    position:absolute;
    top:-0.65em;
    margin-left:10px;
    white-space:nowrap;
}

优点:
    和谐,再也不用每个颜色的“小裤衩”、"小板凳"都做一条了。

缺点:
    1、小裤衩时,在非IE下会有线头露出来(表现为虚边);
    2、还没想到...

DEMO

标签: 标签: css 列表 项目符号

评论


小寨
是不是少了个后括号?
(2010-04-20 15:28)

独孤逸辰
恩,不错的做法。。
(2010-04-17 20:28)
分类
链接
存档

Powered by emlog turf