根據項目數量顯示不同寬度的列表項目

我的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，它涵蓋了寬？

來源

2017-08-31 Avin

你需要一個寬度JavaScript，這將數清單，然後除以寬度前。 100/5列表然後20的寬度將是20％; – bdalina

我想在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將給予限制你的寬度和是否會有項目少的大小會因爲你指定它自動減少最大值不是固定值

來源

2017-08-31 02:06:51

您可以使用JavaScript來解決這個問題的唯一方法就是使用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

希望幫助

來源

2017-08-31 02:08:51 masterpreenz

它的工作原理，但條件似乎是虛假的你添加，< 5, i used > = 5，它顯示5，我也看到類ü添加創建非常大的圖像裏面的標籤 – Avin

由於奇怪的原因我誤解你的問題，你想要的是使所有項目在一行中填充容器的寬度，我認爲這是使項目'100％'。根據您的需求更新我的答案 – masterpreenz

對於這種情況，你需要使用JavaScript來識別<li> S上的號碼，然後你可以用它來：

定義新寬度<li> s

或

上創建一個類你<ul>然後使用CSS來控制 <li> S（.items-5，.items-4，.items-3）

來源

2017-08-31 02:09:26 parpar

根據項目數量顯示不同寬度的列表項目

回答

相關問題