Display inline not work and my item automatically stair

I use this code for list sub category in landing page i need display item inline inline not work properly

<div class="subcategories">
<ul>
    <?php foreach ($categories as $category): ?>
    <li>
            <a href="<?php echo $category->getUrl() ?>"><img src="<?php echo Mage::getBaseUrl('media') . 'catalog' . DS . 'category' . DS . $category->getThumbnail() ?>" alt="<?php echo $this->htmlEscape($category->getName()) ?>" />
                <span><?php echo $category->getName() ?></span></a>
        </li>
    <?php endforeach; ?>
</ul>
</div>

and this css

.subcategories{
      position:relative;
}
.subcategories ul{
overflow:hidden;
}
.subcategories li{
    float: right;
    display: inline;
    text-align: center;
    margin:4px;
    border: 1px solid#5fa5c8;
    width: 24%;
    height: 230px;
}
.subcategories img{
    width: 160px;
    height: 160px;
    padding: 5px;
    margin: 0px -71px 15px 15px;
    border: 1px solid #f0f0f0;
}
.subcategories li span {
    display: block;
    margin: -8px 0 ;
    font-family: inherit;
    font-size: inherit;
    color:#08c;
    line-height: 18px;
    font: 12px/1 YekanWeb,Tahoma,Helvetica,sans-serif;
}

What is finally seen

1
------2
----------3
----------------4
i need 1 2 3 4

Is there a problem with my CSS?