<ul> <li>对齐问题,不同大小的图像

Question

我有以下结构的ul

<div class="gal">
<ul>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/5fdc91f1f2e9471ca375d346d3558757.jpg">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/5fdc91f1f2e9471ca375d346d3558757_thumb.jpg">
            </a>    
        </li>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/d3a43711dee8a4331f14329d40ed6314.jpg">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/d3a43711dee8a4331f14329d40ed6314_thumb.jpg">
            </a>    
        </li>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/836bdef9b8ec56c0a88386760efb1f90.png">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/836bdef9b8ec56c0a88386760efb1f90_thumb.png">
            </a>    
        </li>

        </ul>

因为我有不同的图像拇指尺寸我无法设置宽度和高度<li>.请参考屏幕截图.它没有正确对齐

使用的CSS

<style type="text/css">
    .gal ul li {
        padding: 5px;
        margin: 5px;
        position: relative; 
        float: left;
        list-style:none;
    }

    .imgclass {
        float: left;
        margin: 0 0 15px 0;
        padding: 2px;
        vertical-align:middle;
    }
    .gal {
        margin:0 auto;
        width: 850px;
        text-align:center;
    }

    </style>

我的问题是如何避免重叠小尺寸图像

Answer 1

而不是浮动li元素,display: inline;然后让它们抵消"HTML中的空格"链接尾随你可以拥有<a> display:inline-block,然后你将能够设置vertical-align: middle

示例小提琴:

CSS:

.gal ul li {
    padding: 5px;
    margin: 5px;
    position: relative; 
    display: inline; /* changed from float */
    list-style:none;
}

.gal ul li a {display: inline-block; vertical-align: middle;} /* added */

.imgclass { /* no need to float these **/
    margin: 0 0 15px 0;
    padding: 2px;
    border: 0;
}
.gal {
    margin:0 auto;
    width: 850px;
    text-align:center;
}