Question

我需要列出一个列表，该列表最多包含6个项目，请按照以下步骤操作以获取屏幕的完整宽度：

如果列表中只有一项，则它将占用屏幕的100％宽度；
如果列表中有两项，则每项必须占总数的50％屏幕的宽度；
如果列表中有三个项目，则每个项目都必须提取33％的屏幕的总宽度，依此类推，最多6个项目。

按照到目前为止的操作代码，我做不到，我只需要使用CSS即可。我正在使用Bootstrap。

关注链接：

https://codepen.io/maur-cio-gabriel-kr-ger/pen/yQQxeN

.linksHome {
  overflow: hidden;
  &__link {
    border: 1px #7e7e7e solid;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 30px 30px 25px 30px;
    text-align: center;
    transition: all 0.2s;
    a {
      float: left;
      padding: 30px 30px 25px 30px;
      width: 100%;
    }
    &:hover {
      opacity: 0.7;
      transition: all 0.2s;
    }
  }
  li {
    &:nth-of-type(odd) {
      .linksHome__link {
        background: #7e7e7e;
        color: white;
        &:hover {
          opacity: 0.7;
          transition: all 0.2s;
        }
      }
    }
  }
}

<div class="linksHome ui-container-bottom">
  <div class="linksHome__lista w-100">
    <ul class="row m-0 justify-content-center">
      <li class="">
        <a href="" target="_blank" class="w-100">
          <div class="linksHome__link w-100 text-center">
            Link lorem ipsum dolor
          </div>
        </a>
      </li>
      <li class="">
        <a href="" target="_blank" class="w-100">
          <div class="linksHome__link w-100 text-center">
            Link lorem ipsum dolor
          </div>
        </a>
      </li>
      <li class="">
        <a href="" target="_blank" class="w-100">
          <div class="linksHome__link w-100 text-center">
            Link lorem ipsum dolor
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

Answer 1

使用$（“＃myElement li”）。length 获取可用列表的数量

之后，您可以根据可用列表的数量执行所需操作

动态尺寸清单

1 个答案: