为什么带有`list-inline` bootstrap类的UL列表中的项目转到换行符？

Question

我有这个列表，我想显示内联，我使用list-inline类，但结果不正确。 我不知道为什么会这样。谢谢你的回答。

cshtml代码：

<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>

结果：

Answer 1

尝试向左浮动到li元素

即li{ float: left;}

Answer 2

删除内部padding-top: 15px;代码中的<li>。

运行fiddle。