我怎樣才能給動態寬度爲ul

Question

我希望寬度（ul）動態取決於列表中有多少元素。

他們在做什麼錯？

我有這樣的例子：link

$('.sub-menu').each(function() { 
 
    var liItems = $(this); 
 
    var Sum = 0; 
 
    if (liItems.children('li').length >= 1) { 
 
    $(this).children('li').each(function(i, e) { 
 
     Sum += $(e).outerWidth(true); 
 
    }); 
 
    $(this).width(Sum + 1); 
 
    } 
 
});

.sub-menu { 
 
    background: red; 
 
    display: block; 
 
    overflow: auto; 
 
} 
 
.sub-menu li { 
 
    width: 25%; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="sub-menu"> 
 
    <li>menu1</li> 
 
    <li>menu2</li> 
 
    <li>menu3</li> 
 
    <li>menu4</li> 
 
</ul> 
 

 
<ul class="sub-menu"> 
 
    <li>menu1</li> 
 
    <li>menu2</li> 
 
</ul>

Answer 1

您只需在您的<ul>並在您的列表元素使用display: inline-block;（無需浮動）：

.sub-menu { 
 
    background: red; 
 
    display: inline-block; 
 
    padding: 0 
 
} 
 
.sub-menu li { 
 
    display: inline-block; 
 
}

<ul class="sub-menu"> 
 
    <li>menu1</li> 
 
    <li>menu2</li> 
 
    <li>menu3</li> 
 
    <li>menu4</li> 
 
</ul> 
 
<br /> 
 
<ul class="sub-menu"> 
 
    <li>menu1</li> 
 
    <li>menu2</li> 
 
</ul>

Answer 2

如果你想要的項目完全是頁面寬度的25％，使用CSS只會有點棘手。但我很確定你的目標可以通過javascript來實現。

其中一種方法是通過將背景顏色放在<li>元素而不是<ul>上，並刪除它們之間的空間來僞造它。從技術上講，該列表仍然是頁面的整個寬度，如邊框所示，所以這個解決方案不會工作，這是一個問題。

.sub-menu { 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0 0 10px 0; 
 
    border: dashed 1px grey; 
 
} 
 
.sub-menu:after { 
 
    display: block; 
 
    content: ''; 
 
    clear: both; 
 
} 
 
.sub-menu li { 
 
    background: red; 
 
    list-style: none; /* hides the bullet */ 
 
    width: 25%; 
 
    float: left; 
 
}

<ul class="sub-menu"> 
 
    <li>menu1</li> 
 
    <li>menu2</li> 
 
    <li>menu3</li> 
 
    <li>menu4</li> 
 
</ul> 
 
<ul class="sub-menu"> 
 
    <li>menu1</li> 
 
    <li>menu2</li> 
 
</ul>

但是，如果你可以在<li>元素接受固定witdth，像width: 200px則安地列斯建議答案是一個更好的和更清潔的解決方案。