Question

我的CSS需要修改才能显示5个项目，但如果项目小于5，则应覆盖宽度。

＆＃13;

/* 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 */

＆＃13;

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

＆＃13;

如何制作它以便如果有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会限制您的宽度，如果项目数量会减少，则会自动减小尺寸，因为您指定的是最大值而不是固定值

Answer 2

你可以用这种方法来解决这个问题的唯一方法就是使用JavaScript，因为CSS没有条件可以开始。

// JS
var items = document.querySelectorAll(".product-section ul li");
if (items.length < 5)
{
   items.forEach(function (item) {
     item.style.width = (100 / items.length).toFixed(2) + "%";
   });
}

example

希望有所帮助

Answer 3

对于这种情况，您需要使用javascript来识别<li>的数量，然后您可以将其用于：

定义<li> s

或

在<ul>上创建一个类，然后使用CSS来控制宽度 <li> s（.items-5，.items-4，.items-3）

根据项目数显示不同宽度的列表项

3 个答案: