链接比图片长

Question

所以，我正在制作一个“链接”div在我的网站上。 （reference here)这些链接都是图片，但由于某些原因，它们所包含的div不必要太长，图片应该是现在的三倍左右，但是每当我调整div的大小以使它们变大时，它们就会重叠视频并把它推

的代码看起来是这样的：

<div class="links"> 
    <ul> 
     <li><a href="http://music.papkeeproductions.com"><img src="Images/button_home.png" width="52%" height="69" style="width:15%;height:auto;" /></a></li> 
     <li><a href="http://papkee.bandcamp.com"><img src="Images/button_music.png" style="width:15%;height:auto;" /></a></li> 
     <li><a href="http://papkeeproductions.com"><img src="Images/button_films.png" style="width:15%;height:auto;" /></a></li> 
    </ul> 
</div> 
<div class="player"> 
    <iframe src="http://www.youtube.com/embed/MTmUnOHs5Xs"></iframe> 
</div> 

而CSS

.links { 
float:left; 
width:100%; 
margin-left:0; 
height:auto; 
} 
.links ul { 
list-style-type:none; 
margin:0; 
padding:0; 
} 
.links img { 
width:180px; 
height:auto; 
} 
.player { 
float:right; 
padding:8px; 
border-style:solid; 
border-radius:31px 31px; 
border-color:rgb(45,25,11); 
border-width:2px; 
margin-right:0; 
width:45%; 
height:45%; 
} 
.player iframe { 
width:100%; 
height:100%; 
border:none; 
} 

所以与whaddup它已经沙沙我的巧克力碎屑一整天，我不能？ t好像找到了问题

谢谢！

Answer 1

你的样式属性在标签内被重写样式表：

style="width:15%;height:auto;" 

在优先：

.links img { 
    width:180px; 
    height:auto; 
} 

Answer 2

为什么你的链接宽度为100％，将其改为30％可以保持视频不被压低。这里的例子中，改变位于http://codepen.io/hwatkins/pen/qmzEB