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/