Lista newsów się nie układa

Kod generujący HTML (Smarty):

<div id="poboczne"><ul>{assign var="i" value=0}
{section name=b loop=$newses}
{if $i > 0}<li class="news-poboczny">
    {if $newses[b].is_image}
    <a href="newses/{$newses[b].id}/{$newses[b].url_text}">
        <img id="news-0_img" src="images/newsy/m_{$newses[b].id}.jpg" 
             alt="{$newses[b].url_text}" />
    </a>
    {/if}
    <h2>
    <a href="newses/{$newses[b].id}/{$newses[b].url_text}">{$newses[b].title}</a>
    </h2>
    {$newses[b].short_content}
    <p class="read_more">
        <a href="newses/{$newses[a].id}/{$newses[a].url_text}">Czytaj dalej</a>
    </p>
</li>{/if}    
{assign var="i" value=$i+1}
{/section} 
</ul>
</div>

<div style="clear: both;" id="poboczne_bottom">
</div>

Styl CSS:

#poboczne {
    display: block;
}

#poboczne ul{
    list-style: none;
}

li.news-poboczny {
    display: block;
    float: left;
}

Chcę aby każdy element listy (news) układał się obok kolejnego, nie wychodzi to jednak.

W chrome i firefoksie to samo... HTML - http://wklej.org/id/331747/ CSS - http://pastebin.com/iHBgX6ZS

2 lata temu | edytowane przez: ranger 375210

Odpowiedz na pytanie

0

Odpowiedzi: 2

  • 2 lata temu
    autor: gwypych

    2

    Potrzebujesz jeszcze określić szerokość w css dla znacznika li. Jeśli tego nie określisz to na podstawie własności display=block znacznik jest rozciągany na całą szerokość.

    Wynikowo css powinien wyglądać mniej więcej tak:

    #poboczne {
    display: block;
    width:600px;
}

#poboczne ul{
    list-style: none;
}

li.news-poboczny {
    display: block;
    float: left;
    width: 150px;
}

    Z takiego kodu uzyskasz 4 elementy obok siebie. Należy jeszcze zwrócić uwagę na pozostałe style aby marginesy nie powodowały zaburzeń w widoku (ale to już kosmetyka)

  • 2 lata temu
    autor: robert

    0

    Powinien się stworzyć układ, którego oczekujesz. U mnie tworzy się to bez najmniejszego problemu i żadnej modyfikacji kodu.

Zaloguj się, aby dodać swoją odpowiedź