在这个颜值当道，屌丝闪边的时代，拼不过颜值拼内涵，只有知识丰富才能提升一个人的内在气质和修养，所谓人丑就要多学习，今天图老师给大家分享li 标签左右显示，希望可以对大家能有小小的帮助。
【 tulaoshi.com - Web开发 】
看到下面的效果吧我们今天要要做的就是利用css的 ul li标签做出这种左右排列的效果哦,
根据上面的效果我们分析一下,li 点我们要把它改成图片,
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）ul li{
list-style-image:url(num/8.gif);
}
下面我们最重要的就是左右分开并在同行的情况怎么实现了.
ul
lispan2008.09.12/span fdsafdafd/li
lispan2008.09.12/span li标签列表左右显示方式/li
lispan2008.09.12/span fdafdafda式/li
lispan2008.09.12/span fdafdaf方式/li
lispan2008.09.12/spanfda示方式/li
lispan2008.09.12/span li标fdaffdafda显示方式/li
/ul
大家可能会看到我把span写在前面了,这样做就是会显示日期在后面,文本在前面并文本超过了长度不会换行了,下面我们再来看看css是怎么制作的.
#listcontain{
width:500px;
}
#listcontain ul{
margin:20px 0 0 30px;
}
#listcontain ul li{
line-height:24px;
height:24px;
margin:2px 0 0 0;
list-style-image:url(http://www.111cn.cn/banner/banner.gif);
}
#listcontain ul li a{
float:left;
display:block;
width:345px;
margin:0 0 0 10px;
color:#000000;
overflow:hidden;
}
#listcontain ul li span{
float:left;
}
来源:https://www.tulaoshi.com/n/20160219/1611279.html
