html - 无序列表对齐

Question

问题的图像。查看 3 个列表。

HTML：

<ul id="ranks">
    <?php
    while($row = mysqli_fetch_array($result))
    {
    $id = $row['id'];
    $item = $row['itemName'];
    $desc = $row['desc'];
    $cost = $row['cost'];
    ?>
    <li><div class='command'><?php echo $item ?></div><hr><div class='obtainedHow'><?php echo $desc ?></div><a href='<?php echo $id ?>'><div class='buttonBuy'>Buy - <?php echo $cost ?> Credits</div></a></li> 
    <?php
    }
    ?>
</ul>

CSS：

ul#ranks li{
    margin: 10px;
    padding: 0 20px 0 20px;
    border: 1px solid #DDD;
    height: 150px;
    width: 200px;
    display: inline-block;
    background: #FFF;
    border-radius: 4px;
    position: relative;
    line-height: 1.5em;
}
ul#ranks li:hover{
    border: 1px solid #B1B1B1;
    background: #EFEFEF;
}

查看完整的 CSS

Answer 1

尝试使用这种风格

ul#ranks li{
margin: 10px;
padding: 0 20px 0 20px;
border: 1px solid #DDD;
height: 150px;
width: 200px;
float:left;
background: #FFF;
border-radius: 4px;
position: relative;
z-index: 10;
line-height: 1.5em;
list-style:none

}

检查我的小提琴http://jsfiddle.net/xE4jd/