最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li 标签左右显示
时间:2008-09-12 编辑:简简单单 来源:一聚教程网
看到下面的效果吧我们今天要要做的就是利用css的 ul li标签做出这种左右排列的效果哦,
根据上面的效果我们分析一下,li 点我们要把它改成图片,
ul li{
list-style-image:url(num/8.gif);
}
下面我们最重要的就是左右分开并在同行的情况怎么实现了.
- 2008.09.12 fdsafdafd
- 2008.09.12 li标签列表左右显示方式
- 2008.09.12 fdafdafda式
- 2008.09.12 fdafdaf方式
- 2008.09.12fda示方式
- 2008.09.12 li标fdaffdafda显示方式
大家可能会看到我把span写在前面了,这样做就是会显示日期在后面,文本在前面并文本超过了长度不会换行了,下面我们再来看看css是怎么制作的.
#listcontain{
}
#listcontain ul{
margin:20px 0 0 30px;
}
#listcontain ul li{
line-
margin:2px 0 0 0;
list-style-image:url(http://www.111com.net/banner/banner.gif);
}
#listcontain ul li a{
float:left;
display:block;
margin:0 0 0 10px;
color:#000000;
overflow:hidden;
}
#listcontain ul li span{
float:left;
}
好了最后申明一下,本站原创文章欢迎转载,但请加上出处: www.111com.net
-
上一个: css 控制img图片的大小样式
-
下一个: css 图片加文字排列方式
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26