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

Question

如果带有 width 条件的语句较少，我需要帮助。当我添加 (even) 列表时，它的分割宽度为 50%-50%，如果我添加 (odd) 列表，在我的 last li 需要 100% 宽度。我还分享了 codepen link 和截图。 提前致谢

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 link : demo

图片 link : image preview

Answer 1

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

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>

Answer 2

您需要使用

&: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

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

How to use if statements in width condition with LESS

html

less