Css 如何防止此列表在页面上移动？

我正在尝试将图像与列表项中的某些文本对齐。我以前也问过类似的问题，但解决方案似乎提出了新的挑战，我想包括一张图片来说明出了什么问题

如何使文本和图像在列表中对齐，并防止出现这种（见图）对角线行为

标记：

<div class="col-md-3">
    <ul class="nav">
        <li><%= link_to "Connect", "#", class: "footer-heading" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
        <li><%= image_tag "facebook.png", size: "32"%><%= link_to "Facebook", "url" %></li>
    </ul>
</div>

使用当前CSS，我得到了以下效果：

---

li{overflow:hidden；}

或

li{float:left；clear:both；}

使用引导

内联列表

<div class="col-md-3">
    <ul class="list-inline">
        <li>-</li>
        <li>-</li>
        <li>-</li>
    </ul>
</div>

-
-
-

---

我假设您正在寻找一个垂直列表，但它是整齐地左对齐的。不是吗

您可以取消

img

标记，并在

li

上使用背景

小提琴：

为锚定设置一个类，并使用左填充来偏移徽标：

a.fb {
    background-image: url(facebook.png);
    background-position: top left;
    background-repeat: no-repeat;
    line-height: 36px;
    display: inline-block;
    padding-left: 36px;
}

---

对

li

元素使用float，如下所示：

li{float:left}

在li上设置一个大于图像高度的高度，并可能在li上添加一个上边距。请显示生成的标记，而不是asp代码

a.fb {
    background-image: url(facebook.png);
    background-position: top left;
    background-repeat: no-repeat;
    line-height: 36px;
    display: inline-block;
    padding-left: 36px;
}