有时候会出现一个简单的bug，往往是因为对小细节的一知半解；但往往这个小细节看似简单，背后却大有魅力。（需求）把这部分UI换成这部分貌似比较简单。分析结构：整体是一个无序列表，需要保留前面的图标；每个列表后面都有一个复选标记，并且总是垂直居中；嗯？首先需要一个复选标记，css好像可以实现（那你就不用费心去用图标了）：对实现//。检查{位置：相对;显示：内联块；宽度：16px；高度：15px；边距：010px；&::之后{内容：“”；位置：绝对；左：0；宽度：100%；高度：50%；1px;边框顶部：无；右边界：无；背景：透明；变换：旋转（-45deg）；只保留左边和底部（其他相邻的也可以），最后旋转一个角度就OK了；接下来，图标跟随列表，始终垂直居中（垂直居中的方式有??很多，而且高度可变，用flex方便，就这样），li标签里面的元素需要分两列布局水平，文本在右边，右边在左边，垂直居中。话不多说，只提一下flex。//部分代码，作用就是循环生成列表{storeTypeInfoMap[type].map(item=>({item}))}//css.detail{font-size:12px;颜色：$c-灰色；li{显示：flex;证明内容：空格之间；对齐项目：居中；文本对齐：左；行高：3em；向右填充：10px；.check{位置：相对；显示：内联块；宽度：16px；高度：15px；边距：010px；&::之后{内容：“”；位置：绝对；左：0；宽度：100%；高度：50%；边框：2px实心#000；边界半径：1px；边框顶部：无；右边界：无；表现力声音：透明；变换：旋转（-45deg）；}}}}出现的界面：???为什么我的li标签的list-style属性不见了？是否必须设置list-style-type:disc;对于liul，还是没用？这个小细节1——list-style消失的真相首先想想是不是和flex布局有关；因为flex布局，一些属性会失效；但是只有它的子元素的float、clear和vertical-align属性会失效，没有说list-style属性会失效？是显示器的问题？:首先display好像有个list-item属性可以用于非列表元素的列表布局，不过这里是直接用li，不需要display:list-item；关注细节：li默认有一个list-style属性，因为，browse默认显示：li的list-item就像内联元素显示默认是inline；display:flex设置成这样，所以覆盖了display:list-item，这样我们的list-style就失效了那么如何解决呢？为flex布局嵌入另一个标签元素？{storeTypeInfoMap[type].map(item=>({item}
))}纳尼？列表图标跑到外面去了？两种解决方案：marginul将图标挤进容器里li有个list-style-position属性，设置到里面把图标放进li里（用这个）：吐血，列表图标又独占了好吗？这个小细节2——list-styleembeddedli就是其中之一，但是当liicon被设置为embeddedinli时，相当于li里面的一个内向元素；那么p标签集合就是一个块级元素，集合flex布局也是一个块，占一行就得挤掉；既然block布局不好，那就试试设置wrappingelementPdisplay:inline-flex看看：当只有一行的时候，会导致有趣的display:inline-XXX后知后觉——既inline-xxxinline-flex而inline-block是一个inline-xxx序列，两者都会产生BFC，外部表现是inline特性，内部表现是block特性；想想我们平时使用inline-Block布局的场景：比如在布局导航栏的时候，明明计算了宽度，却把最后一个或几个挤到下一行；我们知道，此时由于inline-block中包含空格和换行符，所以各种原因都会导致inline-block产生间距，也就是会出现换行符；这里的列表图标相当于一个空格之类的，我们还没有设置内嵌的
inline-block标签的宽度（自动根据内容，当然你可以设置width%来腾出空间icon，但是后面改宽度比较麻烦），这样当内容不够一行的时候，p的宽度不要扩展到父容器的宽度然后换行；那有什么办法解决（联系inline-blocklayoutproblem的处理方法）？不要设置显示为inline-block，而是使用float浮动（这里显然不是，我们需要inline-flex布局）设置父元素，white-space:nowrap强制父元素不换行。设置字体大小：0；试试父元素font-size:0发现列表下item的图标不见了？发现：好像列表的icon相当于列表中的一个文本，font-size可以控制它的大小；尝试强制父元素li不换行？空白：nowrap哇！貌似没问题，但是文字没有换行就被挤出来了，这是怎么回事？然后设置子元素p强制换行white-space:pre-wraptrytolikeit;一个新的共同需求诞生了（没错，顺着列表垂直居中）是不是，原来的需求好像还没坐下来？（如果没有办法，那就用第一种处理图标的方法：list-style-position:outside;然后在容器ul中设置margin）总结——简单并不简单虽然这只是一个简单的需求，但是一定要有实现的方法很多，但是每种方法可以推导出的知识点是无穷无尽的；推导出来的每一个知识点看似简单，但背后的原理细节都值得研究。变得简单大方。如果本文对您有所收获，请收藏在心！其他推荐：React中Git常用操作你知多少
