<ul> <li>对齐问题，不同尺寸的图像

问题描述

|| 我有以下结构的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>

因为我的图像拇指大小不同，所以无法将width和height设置为

<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>

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

解决方法

        不用浮动

li

元素，而是让它们

display: inline;

，然后抵消尾随\“ HTML \”中的空格，您可以让have5ѭ

display:inline-block

，然后可以将set7ѭ设置为 小提琴示例： 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;
}

    ,        您可以使用\“ display：inline-block \”。不确定在所有浏览器中是否都可以使用，较旧的firefox中存在问题（http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/）。示例：http：//jsfiddle.net/fs9RU/