时间戳

首页 > 解决方案 > 如何在带有 LESS 的宽度条件下使用 if 语句

html - 如何在带有 LESS 的宽度条件下使用 if 语句

问题描述

如果在 less 中具有宽度条件的语句，我需要帮助。当我添加（偶数）列表时，它的划分宽度为 50%-50%，如果我添加（奇数）列表，在我的最后一个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;
    }
  }
}

代码笔链接：演示

图片链接： 图片预览

标签： htmlless

解决方案

你需要使用

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

推荐阅读