html - 其中的 li 元素宽度图像 - li 高度错误

Question

看看这个:http://jsfiddle.net/8D4f4/1/

问题是锂元素太高了。您可以看到列表元素的背景是灰色的。您可以看到图像下方的灰色。

问题是。为什么 li 元素比图像高？

我需要 li 元素与图像具有相同的高度。

html

<div id="content">
    <ul id="references-all" class="references">
        <li data-id="online">
            <img src="http://s1.directupload.net/images/140627/779m36rh.jpg" 
                 width="324" height="240" class="references-images">
            <div class="description">
                <img src="http://s14.directupload.net/images/140627/z49aajek.png">
                <div>
                    <p>Lorem Ipsum Lorem</p>
                    <img src="http://s1.directupload.net/images/140627/g8yce4ta.png" 
                         width="28" height="27" class="description-arrow">
                </div>
            </div>  
        </li>      
    </ul>
</div> 

CSS

 #content .references {
     margin-bottom: 50px;
     max-width: 980px;
     width: 100%;
 }


 #content .references li {
     background-color: darkgrey;
     float: left;
     margin: 1px;
     max-width: 404px;
     min-width: 225px;
     overflow: hidden;
     position: relative;
     width: 33%;
 }
 #content .references li:hover > .description{
     background-color: #78785a;
     height:100px;
 }
 #content .references li .references-images {
     height: auto;
     width: 100%;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
 }

.description {
     bottom: 0;
     color: #ffffff;
     display: block;
     height: 50px;
     overflow: hidden;
     padding: 7px 0 0 5px;
     position: absolute;
     -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
     -ms-transition: all 0.5s ease-in;
          -o-transition: all 0.5s ease-in;
         transition: all 0.5s ease-in;
     width: 100%;
}

.description p {
    color: #ffffff;
    display: block;
    float: left;
    font-size: 0.800em;
    margin: 0;
    padding-bottom: 15px;
    padding-top: 10px;
    width: 85%;
-webkit-transition: all 0.5s ease-in;
   -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
     -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
}


.description .description-arrow {
    float: left;
    margin-top: 10px;
}

Answer 1

li的高度大于img的，因为img的布局类似于inline-block 并将 img 的底边定位到文本的基线，这会导致文本下行部分出现间距。在您的情况下，您可以将 vertical-align 属性添加到 img 元素以删除图像下方的间距:

img { vertical-align:top; }

JSFiddle