<!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的高度没有设置