给每一个页面的li的宽度不是应该等于容器宽度吗？-慕课网

首页课程实战体系课手记专栏慕课教程

给每一个页面的li的宽度不是应该等于容器宽度吗？

来源：2-1 页面的横向布局

arlenhui

2015-08-06 00:15

//设置每一个页面li的宽度

$.each(slides, function(index) {

var slide = slides.eq(index); //获取到每一个li元素

slides.css({

width: width+'px',

height: height+'px'

});

})

为什么li宽度要等于ul宽度呢？= =代码错了吧？

写回答关注

2回答

arlenhui: 2015-08-06 08:39:09

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <script src="http://img.mukewang.com/down/55ac9a860001a6c500000000.js"></script>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    ol,
    ul,
    li {
        list-style-type: none;
    }
    /*主体部分*/
    #content {
        width    : 60%;
        height   : 60%;
        top      : 20%;
        left     : 20%;
        overflow : hidden;
        position : absolute;
        border   : 1px solid #ccc;
    }
    
    .content-wrap {
        position: relative;
    }
    .content-wrap > li {
        width: 100%;
        height: 100%;
        background: #CAE1FF;
        color: red;
        float: left;
        overflow: hidden;
        position: relative;
    }
    li:nth-child(2) {
       background: #9BCD9B;
    }
   
    li:nth-child(3) {
       background: yellow;
    }
    
    </style>
</head>

<body>
    <div id='content'>
        <ul class='content-wrap'>
            <!-- 第一副画面 -->
            <li> 页面1 </li>
            <!-- 第二副画面 -->
            <li> 页面2 </li>
            <!-- 第三副画面 -->
            <li> 页面3 </li>
        </ul>
    </div>
    <script type="text/javascript">
        var container = $("#content");
        //获取第一个子节点
        var element = container.find(":first")
        //li页面数量
        var slides = element.find("li")
        //获取容器尺寸
        function change(){
            var width = container.width();
            var height = container.height();
            //设置li页面总宽度
            element.css({
                width  : (slides.length * width) + 'px',
                height : height + 'px'
            })
            //设置每一个页面li的宽度
            $.each(slides, function(index) {
                var slide = slides.eq(index); //获取到每一个li元素    
                slides.css({
                   width: width+'px',
                   height: height+'px'
                });
            })
        }
        change();
        window.onresize = function(){
            change();
        }
    </script>
</body>

</html>

0 0

野山椒鸡杂

2015-08-06 00:25:06

父容器是ul吧。。

2 1

arlenh...

语死早，我昨晚就看到这个章节就去睡了，下一章代码和这一章不同，看来是这一章代码错了

2015-08-06 08:38:52

共 2 条回复 >

H5+JS+CSS3实现七夕言情

为七夕节准备的H5+JS+CSS3特效案例，由浅入深案例拆分讲解

211523 学习 · 540 问题

查看课程

相似问题

设置每个li的宽度不是应该是slide.css吗为什么还是element

回答 3

在谷歌和IE都无法实现卷滚效果，每个li的宽度只是自身内容的宽度

回答 3

li标签宽度高度出不来？

回答 2

这宽度到底怎么算的啊，为什么width是div的宽度，下面ul宽度的计算还用这个width乘3？

回答 2

为什么ul的宽度为一万多？

回答 1

打开慕课网App查看更多内容