魔法CSS(1)——消失的list-style
有时候一个简单Bug的出现,往往是由于一点知识小细节;但往往这点小细节看似简单,其背后却颇有韵味。
(需求)这部分UI给换成这样的
看起来相对比较简单,分析下结构:
- 整体为无序列表,需要保留前置图标;
- 每个列表后跟随对号,且始终垂直居中;
- 嗯?首先需要个对号,Css好像可以实现(那就用不用麻烦用icon了):
- 对好实现
// <span className="check" /> .check{ position: relative; display: inline-block; width: 16px; height: 15px; margin: 0 10px; &::after{ content: ""; position: absolute; left:0; width: 100%; height: 50%; border: 2px solid #000; border-radius: 1px; border-top: none; border-right: none; background: transparent; transform: rotate(-45deg); } }
- 实现原理很简单,就定个伪元素设置宽高形成矩形,然后背景色透明,边框只保留左和下(其他相邻也可),最后旋转个角度就OK;
- 接下来,图标跟随列表始终垂直居中(垂直居中方法比较多,高度不定flex方便点,就他了),li标签内元素需要水平两列布局,文字靠右,对好靠左垂直居中,话不多说提上flex就是撸。
// 部分代码,作用就是循环生成列表 <ul className="detail" > { storeTypeInfoMap[type].map(item => ( <li> {item} <span className="check" /> </li>)) } </ul> // css .detail { font-size: 12px; color: $c-gray; li { display: flex; justify-content: space-between; align-items: center; text-align: left; line-height: 3em; padding-right: 10px; .check{ position: relative; display: inline-block; width: 16px; height: 15px; margin: 0 10px; &::after{ content: ""; position: absolute; left:0; width: 100%; height: 50%; border: 2px solid #000; border-radius: 1px; border-top: none; border-right: none; background: transparent; transform: rotate(-45deg); } } } }
- 出现的界面:
- ???我的li标签的list-style属性怎么没有啦?强制给liul都设置个
list-style-type: disc;
,还是没用?
这点小细节1——list-style消失真相
- 首先想想是不是更flex布局有关;因为Flex 布局,会导致一下属性失效;但是也只有其子元素的float、clear和vertical-align属性失效,没说list-style属性会失效啊?
问题在于display ?:
- 首先display好像有个list-item属性可以对非列表元素进行列表布局,但这里是直接使用li,不需要
display:list-item
啊; - 划细节重点:
- li默认有
list-style
属性是因为,浏览器对li的默认display:list-item
,就像内敛元素display默认为inline
; - display:flex设为这个,所以就覆盖了display:list-item,以至于我们的list-style失效了。
- 首先display好像有个list-item属性可以对非列表元素进行列表布局,但这里是直接使用li,不需要
- 那么如何解决?
- 内嵌一个其他标签元素进行flex布局?
<ul className="detail" > { storeTypeInfoMap[type].map(item => ( <li> <p className="detail-item"> {item} <span className="check" /> </p> </li>)) } </ul>
- 纳尼?列表图标跑到外边去了?
两个解决方案:
- 对ul进行margin把图标挤进容器
- li有个
list-style-position
属性,设置为inside将图标放进li中就好(用这个把):
- 吐血,列表图标咋的又给独占一行啦?
这点小细节2—list-style内嵌li内部就是其中一员
- 但li图标设置内嵌到li内部时,其就相当与是li内部的一个内敛元素;
- 然后套的P标签又是块级元素,设置的flex布局也为块,得独占一行就被挤下来了;
- 既然块布局不行,那么试着将包裹元素P设置为
display: inline-flex
看看:
- 只有一行时这里又引出了有意思的
display:inline-XXX
后知后觉——inline-xxx
- inline-flex和inline-block都是一个inline-xxx序列,都会产生BFC,并且外部表现为inline特性,内部表现为block特性;
- 联想到我们平时使用inline-block布局的场景:比如布局导航栏,经常会出现宽度明明计算好,但是却会出现最后一个或几个被挤到下一行的现象;我们知道这时由于inline-block是包含空格、换行符的,所以种种原因会导致inline-block产生间距,即会出现换行;
- 这里列表图标相当于空格之类的,而我们没有对内嵌的<p>
inline-block
标签设置宽度(根据内容自动,当然可以设置宽度%给图标腾出位置,但这样处理后期更改宽度相对麻烦),以至于当内容不足以一行容下时,p宽度就别撑到父容器的宽度,便换行; 那么有什么办法解决呢(联系下处理inline—block布局问题的方式)?
- 不设置display为inline-block,而使用float浮动(这里显然不行,我们需要inline-flex布局)
- 设置父元素,white-space: nowrap强制不换行
- 父元素设置font-size: 0;
- 试试父元素
font-size: 0
- 发现列表下项的图标没有了?
- 发现:看来列表的图标相当与列表中的一文字,
font-size
可以控制其大小;
- 试试父元素li强制不换行?
white-space: nowrap
- 哇!可以了好像,但是文字不换行被挤出去了,这个怎么回事?
- 再设置子元素p强制换行
white-space: pre-wrap
试试
- 赞;一个新的常用需求诞生了(对好紧随列表垂直居中)
- 不对好像最初的需求还没有坐呢?(没办法那就用第一种处理图标的方法:
list-style-position: outside;
然后容器ul设置margin啰)
总结—简单并不简单
- 虽然这只是一个简单的需求,实现的方法肯定很多,但是每一种方法的背后可以衍生出的知识点却是无尽的;衍生出的每一个知识点也许看似简单,但其背后的原理细节却是值得研究的。
学无止境,积累点滴;把小简单变成大简单。
- 如果这篇文章对你有所收获,请留在你的小心心!
- 其他推荐:
- React你知多少
- Git常用操作
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18