Why items in an UL list with `list-inline` bootstrap class goes to newline?

Question

I have this list and I want to show this inline , I use list-inline class, but the result is not true . I don't know why this happened . Thanks for any answer .

cshtml code :

<ul  style="text-align: center; list-style-type: none;  vertical-align: top;">

                <li>
                    @foreach (var item in Model.SocialNetworks)
                    {
                        <ul class="list-inline" style="text-align:center;list-style-type:none;padding-top:15px;">
                            <li class="col-xs-3">
                                <a class="aFooter" href="@item.SocialLink">
                                    <img class="img-responsive center-block socialIcon" src="@Url.Content(item.SocialIcon.ToString())" />
                                </a>
                            </li>
                        </ul>
                    }
                </li>
            </ul>

Result :

Answer 1

Try float left to li element

ie, li{ float: left;}

Answer 2

Remove the padding-top: 15px; at the inside <li> tag.

With running fiddle .