En alttaki gibi bir html kodum var. Öğelerin yan yana durması gerekirken alt alta geliyorlar. Sonuç hemen aşağıdaki resim gibi oluyor. ve sıradan tire işareti "-" nasıl oluyor da ince bir alt çizgiye dönüşüyor. Bunları nasıl düzeltebilirim? Kodların php kısımlarını bütünlük bozulmasın diye çıkarmadım ama okunurluk kolaylaşsın diye de bazı yerlerine ... koydum.

           
<div class="ilgiliclass">
<?php
            echo '<ul>';
            if(...)
            {
                foreach(...)
                {
                    if(...)
                    {
            ?>
                        
                            <li>
                                <img src="img/track_arrow.gif">
                                <div class="si">
                                    <a href="...">...</a> 
                                </div>                                                             
                                -
                                <div class="so">
                                    <a href="...">...</a> <div class="temiz">
                                </div>
                                <br />
                            </li>

            <?php        
                    }
                }  
            }  
            ?>
        </ul>
        </div>