如何防止此列表在整個頁面中移動？

我正在嘗試將圖像與列表項中的某些文本對齊。我之前曾問過類似的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我得到這樣的效果：

enter image description here

來源

2013-12-10 Sheldon

使用浮子'這樣li'元素：'李{浮動： left}' –

在你的li上設置的高度大於圖像的高度，並且可能在li上添加頂部邊距 –

請顯示結果標記，而不是asp代碼 – Abhitalks

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

來源

2013-12-10 14:34:48 n1kkou

使用引導list-inline ..

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

Bootply

來源

2013-12-10 14:38:13 ZimSystem

我假設你正在尋找一個垂直列表，但是這是整齊排列的左側。不是嗎？

您可以使用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; 
}

來源

2013-12-10 14:49:20 Abhitalks

如何防止此列表在整個頁面中移動？

回答

相關問題