布局出现这种情况要注意！！！

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<div id="main">
<h5 id="title"><i>动漫视频</i><img src="image/左.png" alt="未显示" class='pic1'><img src="image/右.png" alt="未显示"  class='pic2'><span><a href="http://www.narutom.com/onepiece/video/32274.html">更多动漫视频</a></span></h5>

        <ul id="wrap">
    <li><a href="http://www.narutom.com/onepiece/video/32274.html"><img src="image/01.jpg" alt="未显示"></a><a href="http://www.narutom.com/onepiece/video/32274.html">海贼王第779集「凯多再次袭来 威胁重重的极恶时代!」</a></li>
    <li><a href="http://www.narutom.com/onepiece/video/32274.html"><img src="image/02.jpg" alt="未显示"></a><a href="http://www.narutom.com/onepiece/video/32274.html">海贼王第778集「世界会议 蕾贝卡和樱花王国!」</a></li>
    <li><a href="http://www.narutom.com/onepiece/video/32274.html"><img src="image/03.jpg" alt="未显示"></a><a href="http://www.narutom.com/onepiece/video/32274.html">海贼王第777集「参加世界会议 薇薇公主和白星公主!」</a></li>
    <li><a href="http://www.narutom.com/onepiece/video/32274.html"><img src="image/04.jpg" alt="未显示"></a><a href="http://www.narutom.com/onepiece/video/32274.html">海贼王第776集「离别的下象 夺回山治的出海!」</a></li>

<li><a href="http://www.narutom.com/onepiece/video/32274.html"><img src="image/01.jpg" alt="未显示"></a><a href="http://www.narutom.com/onepiece/video/32274.html">海贼王第779集「凯多再次袭来 威胁重重的极恶时代!」</a></li>
    <li><a href="http://www.narutom.com/onepiece/video/32274.html"><img src="image/02.jpg" alt="未显示"></a><a href="http://www.narutom.com/onepiece/video/32274.html">海贼王第778集「世界会议 蕾贝卡和樱花王国!」</a></li>
    <li><a href="http://www.narutom.com/onepiece/video/32274.html"><img src="image/03.jpg" alt="未显示"></a><a href="http://www.narutom.com/onepiece/video/32274.html">海贼王第777集「参加世界会议 薇薇公主和白星公主!」</a></li>
    <li><a href="http://www.narutom.com/onepiece/video/32274.html"><img src="image/04.jpg" alt="未显示"></a><a href="http://www.narutom.com/onepiece/video/32274.html">海贼王第776集「离别的下象 夺回山治的出海!」</a></li>
    </ul>
    
    

</div>      
</body>
</html>

 

* {
    margin: 0;
    padding: 0;
}

#title {
    background: #f93;
}

#title .pic1 {
    width: 20px;
    height: 20px;
    margin-left: 50px;
}

#title .pic2 {
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

#title span {
    margin-left: 700px;
}

#title {
    padding: 5px;
}

#title i {
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    height: 20px;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

a:hover {
    text-decoration: underline;
}

#main {
    height: 700px;
    overflow: hidden;
    padding-bottom: 15px;
    position: absolute;
    top: 100px;
    left: 10%;
    width: 1000px;
    border: 2px solid #ccc;
    -webkit-box-shadow: 0 0 8px #ccc;
    -moz-box-shadow: 0 0 8px #ccc;
    box-shadow: 0 0 8px #ccc;
    -o-box-shadow: 0 0 8px #ccc;
}

#wrap {
    margin-top: 15px;
    /*position: relative;*/
}

#wrap img {
    width: 180px;
    height: 150px;
}

#wrap li {
    margin-left: 50px;
    float: left;
   height: 230px;
    /*这里的高度不能省略*/
}

#wrap li a {
    width: 180px;
    display: block;
}

 

出现问题的原因是li的高度没有设置

 

posted @ 2017-03-14 21:34  一米阳光!  阅读(153)  评论(0)  编辑  收藏  举报