纯css实现根据个数显示不同的样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    ul {
      display: flex;
    }
    li{
        width: 100%;
        background: red;
    }
    li:nth-last-child(2),li:nth-last-child(2) ~ li{
        width: 50%;
        background: green;
    }
    li:nth-last-child(3),li:nth-last-child(3) ~ li{
         width: 33%;
        background: blue;
    }

  </style>
</head>
<body>
  <ul>
   <li>1111111111111111</li>
   <li>222222222222</li>
   <li>3333333333333</li>
  </ul>
</body>
</html>
image.png
image.png
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,083评论 1 45
  • 有1-3个item显示在同一行,但是item的个数不一定,如果只有一个,那这个item占宽100%,有2个时每一个...
    钱学敏阅读 1,157评论 0 0
  • 使用纯 CSS 实现 500px 照片列表布局 文章很长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读...
    HZ充电大喵阅读 7,526评论 0 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 一只小鸟, 落在峰上… 它总是幻想太阳, 睡着了, 也伸一下翅膀: 一半在云里, 一半在天上…
    MFC梅阅读 2,885评论 12 16