ul li列表样式css,列表ul li 专用样式

列表ul li 专用样式

DATE: 2016-11-10 / VIEWS: 1142

主页级别的页面大部分的内容都是做在无序列表里面的，其庞大的使用规模，需要有完备的样式支持。

ul{zoom:1} 这个样式包括下面两个是zoom在ul里的应用

ul li{zoom:1;+margin-bottom:-4px} 针对ie下ul li 元素的margin-bottom:4px 的bug(bug出现条件：li 里有float 元素)使用了该样式的li其内可有浮左、浮右div，并且li内可兼容多行结构，这是样式ul.ll20 li无法实现的。

ul li{zoom:1;+margin-left:-16px} 这个样式的出现有些不得已，记得前面说过，为了避免ie6下的double margin bug，我们给所有的float元素额外加上了display;inline，这导致float属性的ul 在ie下出现意料之外的缩进问题，只能再增加这个样式来解决这一问题。

ul.ll20 li{line-height:20px;height:20px;+margin-bottom:-4px}

ul.ll23 li{line-height:23px;height:23px;+margin-bottom:-4px}

以上两个样式适用于固定高度的单行li，什么是单行li？指的是li中的文字无换行。

和height等值的line-height让 li中文字垂直居中。使用了这个样式的li其内可以有浮左、浮右div，是解决单行li兼容的比较好的方式。

ul.li20 li{background:url(http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 7px no-repeat;

padding-left:15px}

ul.li23 li{background:url(http://img.china.alibaba.com/images/cn/home/070215/d_ico.gif) 5px 10px no-repeat;

padding-left:15px}

这两个样式没什么好说的，分别针对li高度20px和23px的li背景样式，背景其实就是一个no repeat的方点。

ul.ll li{float:left;display:inline}

ul.lr li{float:right;display:inline}

想让一个个li象火车一样首位相接吗？用上面两个样式吧，让所有的li浮起来。

ul.ldl li{display:inline} 这个样式我不太喜欢，同样可以让li象火车一样首位相接，但是代价太大，所有的li都变成inline了，很多css样式对inline的元素无效，包括最基本的width、height、margin-top

ul.lbt li{border-top:1px dashed #CCC}

ul.lbl_1 li{border-left:1px solid #000}

两个给li加边框的样式，给了li 更好的分隔效果。

这样，ul li 专用样式部分就结束了。

Posted in: 前端 Tagged: