Question

我们可以根据<ul>的数量更改<li>宽度吗？

示例：

<li> = 100px of <ul> width
<li> = 200px of <ul> width
<li> = 300px of <ul> width
<li> = 400px of <ul> width
<li> = 500px of <ul> width
<li> = 600px of <ul> width

依旧......

Answer 1

CSS 就是您所需要的

DEMO

将CSS中的dispaly:inline-block提供给您的ULp>

Answer 2

为什么不使用width: auto;？

ul{
 width: auto;
}
li{
 display: inline-block;
}

适合你！

或者，如果您想使用jQuery，可以像其他人一样建议：

var liwidth = $(ul li).length * 100;
$('ul').css('width',liwidth);

Answer 3

尝试，

var cache = $('ul')
cache.width(cache.children('li').length * 100);

Answer 4

您可以使用：

$('ul').each(function() {
    $(this).width($(this).find('li').length*100);
});

Answer 5

你不敢使用JS。

有什么问题

li {
    float: left;
    width: 100px;
}

Answer 6

试试这个;

<强> HTML

<ul id="pr">
    <li>
        <ul>
            <li>List-1</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>List-2</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>List-3</li>
        </ul>
    </li>
</ul>

<强> JS

var pr = $('#pr').children('li');
$.each(pr,function(k,v){
     $(this).children('ul').width(k*100+100);  
})

<强>的jsfiddle

http://jsfiddle.net/2N9Es/2/

根据<li> </li> </ul>的数量更改<ul>宽度

6 个答案: