如何使用宽度小于LESS的if语句

Question

i如果条件小于[[width的语句较少，则需要帮助”。当我添加（even）列表时，其划分宽度为50％-50％，如果我添加（odd）列表，则在我的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
图像链接：image preview

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

您可以给li:nth-last-child(1):nth-child(odd)。如果最后一个孩子是一个奇数，这将适用。

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>