如何使用最大寬度容器包裝列表

Question

我有一個最大大小爲176px的列表。如果項目溢出，我想讓他們環繞ul容器。如果他們沒有溢出，我想讓ul適應寬度。

在我的示例中，第一個列表溢出，並繞過最大容器大小。就是我想要的！ 第二個列表不會溢出。所以容器需要更小，需要調整到列表的大小。我已經添加了最大寬度，但沒有成功。

如何讓我的第二個列表容器與列表的寬度一樣？

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.flagMenu { 
 
    border: 1px solid red; 
 
    max-width: 176px; 
 
    white-space: wrap; 
 
} 
 

 
.flagMenu li { 
 
    display: inline-block; 
 
}

<ul class="flagMenu"> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
</ul> 
 

 
<br><br> 
 

 
<ul class="flagMenu"> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
</ul>

Answer 1

添加display: inline-block您ul元素。

無序列表元素默認爲塊級元素，所以它們自然會出現在新行上，並佔用全部可用寬度。通過改變顯示屬性爲inline-block的，就可以覆蓋默認的行爲..

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: auto; 
 
    display: inline-block 
 
} 
 

 
.flagMenu { 
 
    border: 1px solid red; 
 
    max-width: 176px; 
 
    width: auto; 
 
    white-space: wrap; 
 
} 
 

 
.flagMenu li { 
 
    display: inline-block; 
 
}

<ul class="flagMenu"> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
</ul> 
 

 
<br><br> 
 

 
<ul class="flagMenu" style="width: auto;"> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li> 
 
</ul>