魔法CSS（1）——消失的list-style

zacklee 发布于2019-08-29 17:12 / 2323人阅读

摘要：有时候一个简单的出现，往往是由于一点知识小细节但往往这点小细节看似简单，其背后却颇有韵味。如果这篇文章对你有所收获，请留在你的小心心其他推荐你知多少常用操作

有时候一个简单Bug的出现，往往是由于一点知识小细节；但往往这点小细节看似简单，其背后却颇有韵味。

（需求）这部分UI给换成这样的

看起来相对比较简单，分析下结构：

整体为无序列表，需要保留前置图标；

每个列表后跟随对号，且始终垂直居中；

嗯？首先需要个对号，Css好像可以实现（那就用不用麻烦用icon了）：

对好实现

// 
.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就是撸。

// 部分代码，作用就是循环生成列表

    {
        storeTypeInfoMap[type].map(item => (
            
                {item}
                
            ))
    }

// 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失效了。

那么如何解决？

内嵌一个其他标签元素进行flex布局？


    {
        storeTypeInfoMap[type].map(item => (
            
                
                    {item}
                    
                
            ))
    }

纳尼？列表图标跑到外边去了？

两个解决方案：

对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产生间距，即会出现换行;

这里列表图标相当于空格之类的，而我们没有对内嵌的

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常用操作

超融合服务器服务器托管创造与魔法云鸟便宜的服务器创造与魔法所有服务器的云鸟在哪服务器上的文件消失后魔法女巫

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114173.html

魔法CSS（1）——消失的list-style

摘要：有时候一个简单的出现，往往是由于一点知识小细节但往往这点小细节看似简单，其背后却颇有韵味。如果这篇文章对你有所收获，请留在你的小心心其他推荐你知多少常用操作有时候一个简单Bug的出现，往往是由于一点知识小细节；但往往这点小细节看似简单，其背后却颇有韵味。（需求）这部分UI给换成这样的 showImg(https://segmentfault.com/img/bVbjgWw?w=64...

Fourierr 2019-08-23 13:02 评论0 收藏0
魔法CSS（1）——消失的list-style

摘要：有时候一个简单的出现，往往是由于一点知识小细节但往往这点小细节看似简单，其背后却颇有韵味。如果这篇文章对你有所收获，请留在你的小心心其他推荐你知多少常用操作有时候一个简单Bug的出现，往往是由于一点知识小细节；但往往这点小细节看似简单，其背后却颇有韵味。（需求）这部分UI给换成这样的 showImg(https://segmentfault.com/img/bVbjgWw?w=64...

hidogs 2019-08-02 11:57 评论0 收藏0
魔法CSS（1）——消失的list-style

摘要：有时候一个简单的出现，往往是由于一点知识小细节但往往这点小细节看似简单，其背后却颇有韵味。如果这篇文章对你有所收获，请留在你的小心心其他推荐你知多少常用操作有时候一个简单Bug的出现，往往是由于一点知识小细节；但往往这点小细节看似简单，其背后却颇有韵味。（需求）这部分UI给换成这样的 showImg(https://segmentfault.com/img/bVbjgWw?w=64...

tuantuan 2019-08-05 18:07 评论0 收藏0
CSS魔法堂：重拾Border之——不仅仅是圆角

摘要：撸代码实现首页检验单查询成品通用标准审核圆角的何止是啊上图的变成椭圆形了，而且中的文字好像飘到外面。我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right...

_Dreams 2019-08-30 13:01 评论0 收藏0
实现二级菜单的滑动出现与消失(解决dispaly与transition冲突问题)

摘要：解决与冲突的问题思路因为和有冲突只要就不起作用在开始变为然后设置为秒后在改变其他的如或等可以过渡的在最后用监听一次过渡结束事件链接演示代码如下实现二级菜单的滑动出现与消失加到属性里加到属性里这段用写在的属性上方便进行修改作解决transition与display冲突的问题思路: 因为transition和display有冲突,只要dispaly,transition就不起作用,在...

fnngj 2019-08-22 18:03 评论0 收藏0