无法显示内联li元素

Question

I try to display my li elements inline but result is likeon image: http://prntscr.com/87n6z8

Can anybody help me?

This is my html and css codes:

<footer>
        <ul class="footer_ul">
            <li><a href="#">O nama</a> |</li>
            <li><a href="#">Kontakt</a> |</li>
            <li><a href="#">Pitanja i odgovori</a> |</li>
            <li><a href="#">Video tutorijali</a> |</li>
            <li><a href="#">Pravila korištenja</a></li>
        </ul>
</footer>


footer{
    width:100%;
    clear:left;
    float:left;
    height:auto;
    background:white;
}

.footer_ul{
    display:inline;
    list-style:none;
    padding:0;
    float:left;
    width:100%;
}

.footer_ul li{
    padding:5px;
}

.footer_ul li a{
    text-decoration:none;
}

Thanks

Answer 1

You forgot to give it to <LI> . It has a default value of display: list-item . So change your code to:

.footer_ul li{
    padding:5px;
    display:inline;
}