Question

我正在使用jquery创建li，每个间隔最多只有5次。并且随着每个li，边界宽度也增加。问题是我希望所有的li都适合水平对齐的窗口/页面。

我在每个间隔上做了什么我通过获取窗口宽度来调整li宽度并将其除以当前li长度。但每个li都有不同的边框宽度，所以我还需要计算它。

这是我到目前为止所做的。

<style>
    * { margin:0; padding:0;}
    ul { list-style:none; height:300px; width:100%;}
    li { display:block; float:left; height:100%; border:1px solid blue;}
</style>

<script>
$(document).ready(function() {
    var w = $(window).width();

    var interval = setInterval(function(){

        var li = $('<li>');

        var l = $('li').length+1;

        li.css('border-width', l);

        $('ul').append(li);

        $('li').width((w-l*2)/l);

        if($('li').length > 4){
            clearInterval(interval);
        }

    }, 2000);
});
</script>

Answer 1

只需将CSS box-sizing:border-box设置为<li>，这样您就不必担心border-width计算，然后将宽度设置为百分比。< / p>

$(document).ready(function() {

    var w = $(window).width();

    var interval = setInterval(function(){

        var li = $('<li>');

        var l = $('li').length+1;

        li.css('border-width', l);

        $('ul').append(li);

        $('li').css({'width':(100/l)+'%'});

        if($('li').length > 4){
            clearInterval(interval);
        }

    }, 2000);

});

同时检查此fiddle

使用间隔生成li并调整所有大小以适合水平窗口

1 个答案: