html - 根据元素数量以不同宽度显示列表元素

Question

我的 CSS 需要修改以显示 5 个元素，但如果元素少于 5 个，它应该覆盖整个宽度。

/* new css added */

.product-section {
  width: 100%;
  float: left;
  padding: 108px 80px 0;
}

.product-section h6 {
  width: 100%;
  float: left;
  font-family: 'Open Sans';
  font-weight: 600;
  font-size: 17px;
  line-height: 19px;
  color: #585253;
  text-transform: uppercase;
  border-bottom: 1px solid #d0d0d0;
  padding: 0 0 6px;
}

.veiwed-related {
  width: 100%;
  float: left;
  padding: 66px 0 0;
}

.recently-veiwed-related ul {
  width: 100%;
  float: left;
  list-style: none;
  margin: 0 0 0 -33px;
  padding: 0;
  position: relative;
}

.veiwed-related ul li {
  width: 16.5%;
  float: left;
  list-style: none;
  margin: 0 0 20px 33px;
  padding: 0;
}

.veiwed {
  width: 100%;
  float: left;
}


/* new css added */

<div class="product-section">
  <h6>you may also like</h6>
  <div class="veiwed-related">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
    </ul>
  </div>
</div>

如果有 5 个 <li> 我怎样才能做到s，它低于该宽度，但如果我只有 1 或 3，它会覆盖宽度？

Answer 1

我认为在 view-related 中你想这样做:

.veiwed-related ul li{
max-width:16.5%; //adjust the width by using max width so that it do not take unwanted place
float:left;
list-style: none;
margin: 0 0 20px 33px;
padding: 0;
}

max-width 将限制您的宽度，如果元素较少，尺寸将自动减小，因为您指定的是最大值而不是固定值