美文网首页
高效-3根据个数显示不同的样式

高效-3根据个数显示不同的样式

作者: 钱学敏 | 来源:发表于2018-05-20 12:43 被阅读0次

有1-3个item显示在同一行,但是item的个数不一定,如果只有一个,那这个item占宽100%,有2个时每一个占50%,3个时每个占33%。
这个需求可以用js计算,但是能用html/css解决的问题就不要用js。

<ul>
 <li>1111111111111111</li>
 <li>222222222222</li>
 <li>3333333333333</li>
</ul>
<style>
    li{
        width: 100%;
        background: red;
    }
    li:first-child:nth-last-child(2),li:first-child:nth-last-child(2) ~ li{
         width: 50%;
        background: green;
    }
    li:first-child:nth-last-child(3),li:first-child:nth-last-child(3) ~ li{
         width: 33%;
        background: blue;
    }
</style>
1个时 2个时 3个时

相关文章

网友评论

      本文标题:高效-3根据个数显示不同的样式

      本文链接:https://www.haomeiwen.com/subject/kvzzdftx.html