Question

ui li 标签在什么时候使用得当

Answer 1

如果能够巧妙运用它们的原生样式将会使代码更加简洁高效
先说ul、li的原生样式：l
style: ist-style（竖向排布、li标签内容前都自带大黑点等）；
position: padding和margin。

这是每个标签最重要的两个方面，一个就是原生样式，另一个就是位置关系。

一般情况下，我们会先设定：

ul{ padding:0;margin:0} ; li{ list-style:none}去掉ul和li的原生样式。

接下来ul和li就可以大展身手啦！！！

碰到竖向排布的元素，我们直接采用li{ display:list-item;}即可将li变为竖向列表元素，作用完全和div类似。

碰到横向排布的元素，我们直接采用li{ display:inline-block; vertical-align:"" ;}即可将li变为横向排布元素，

而且可以避免使用div{ float:left;}带来的高度塌陷问题，相当好用！！

需要注意的几点：li在采用inline-block的时候，如果li标签没有紧挨在一起，将会在li元素之间自动插入空格。

这样好处是碰到一般的文字情况，避免了自己去设置margin;
这样的坏处是采用自己的样式，可能margin等数据会不精确，那有没有解决办法？？
当然有啦！！读者可以尝试在ul元素中设置 font-size:0;然后在li元素中再次定义font-size为自己希望的字体大小，即可完美解决问题
作者：bruceslash
来源：CSDN
原文：https://blog.csdn.net/bruceslash/article/details/45568457