在前端開發過程中，常常需要使用無序列表來展示多個相似或相關的內容，例如產品的功能特點或者博客文章的目錄。使用CSS可以讓無序列表的每個項目（li標簽）自適應寬度，使它們在每行排列時更為美觀和整齊。

<ul class="list">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
<li>項目6</li>
<li>項目7</li>
<li>項目8</li>
<li>項目9</li>
<li>項目10</li>
</ul>
.list li {
display: inline-block;
width: calc(100% / 3);
margin-right: 2%;
text-align: center;
}
.list li:last-child {
margin-right: 0;
}

使用以上代碼，我們設置了一個class為list的無序列表，并使用CSS設置每個項目為行內塊級元素（display:inline-block），每個項目寬度為列表容器寬度的三分之一（width:calc(100% / 3)），項目之間有2%的右邊距（margin-right:2%）。最后一個項目的右邊距為0，以便它能夠完全適應容器的寬度。

如果需要列表項目數量發生變化時也保持自適應，我們可以使用JavaScript通過修改css中的width屬性實現。以下是一個簡單的JS示例：

var list = document.querySelector('.list');
var li = document.querySelectorAll('.list li');
var liNum = li.length;
var liWidth = 100 / liNum + '%';
for (var i = 0; i < liNum; i++) {
li[i].style.width = liWidth;
}

以上JS代碼獲取了容器和項目的元素，然后通過循環遍歷每一個項目，設置它們的寬度為百分比形式的容器寬度除以項目數量。這樣，當項目數量改變時，就能夠保持自適應的寬度。

通過CSS和JavaScript的兩種方式，我們可以讓無序列表的每個項目自適應寬度，使排列更為美觀和整齊。