Unordered list alignment

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

See full 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/