如何在宽度条件下使用if语句

Question

如果条件少于[[width的语句，我需要帮助。当我添加**（偶数）**列表时，其划分宽度为50％-50％，如果我添加**（奇数）**列表，则我的[[last li中的宽度需要为100％。我也分享了Codepen链接和屏幕截图。

HTML代码是：<ul><li><span> list 1</span></li><li><span> list 2</span></li><li><span> list 3</span></li><li><span> list 4</span></li><li><span> list 5</span></li></ul>

更少的代码：

ul{list-style:none;max-width:300px;li{width:50%;float:left;color:white;box-sizing:border-box;padding:5px;span{display:block;background-color:gray;padding:3px}}}

Codepen链接：demo

[图像链接：图像预览：

Answer 1

&:nth-last-child(1):nth-child(odd) {
  width: 100%!important;
}

检查更新的样式

ul {
  list-style: none;
  max-width: 300px;

  li {
    width: 50%;
    float: left;
    color: white;
    box-sizing: border-box;
    padding: 5px;

    &:nth-last-child(1):nth-child(odd) {
      width: 100% !important;
    }

    span {
      display: block;
      background-color: gray;
      padding: 3px;
    }
  }
}

检查jsfiddle演示Here

Answer 2

ul {
  list-style:none;
  max-width:300px;
}
li {
    width:50%;
    float:left;
    color:white;
    box-sizing:border-box;
       padding:5px;
    
}
span {
      display:block;
       background-color:gray;
      padding:3px;
}
li:nth-last-child(1):nth-child(odd) {
    width:100%;
}

<ul>
  <li><span> list 1</span></li>
  <li><span> list 2</span></li>
  <li><span> list 3</span></li>
  <li><span> list 4</span></li>
  <li><span> list 5</span></li>
</ul>