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に頼らずに達成できると確信しています。

<ul>の代わりに<li>要素に背景色を置き、それらの間のスペースを削除することによって、1つの方法が偽装されます。技術的には、このリストはまだ境界線で示されているように、ページの全幅であるため、この解決策は問題ではありません。

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

もしwidth: 200pxその後、Andreasの提案答えはより良く、きれいソリューションであるように、しかし、あなたは、<li>要素の固定witdthを受け入れることができます。