如何阻止此列表在页面中移动？

Question

我正在尝试将图像与列表项中的某些文本对齐。我之前曾问过类似的question，但解决方案似乎提出了新的挑战，我想要包含一个图像来显示出现了什么问题。

如何让文字和图像在我的列表中对齐并防止出现这种（见图像）对角线行为？

标记：

<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 img{ 
   float: left;
 }

使用当前的CSS我得到了这个效果：

Answer 1

li{ overflow:hidden; }或li{ float:left; clear:both; }

Answer 2

使用Bootstrap list-inline ..

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

Bootply

Answer 3

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

您可以取消img代码并使用li上的背景。

小提琴： http://jsfiddle.net/V2Zxb/

为您的锚点添加一个类，并使用左侧填充来抵消徽标：

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