ul左邊的浮動圖像忽略邊距/填充

Question

我有一個段落後跟一個無序列表，其中有幾個列表項。我也有一個漂浮在左邊的圖像。我遇到的問題是列表項邊距/填充正被該圖像重疊。

我想要圖像旁邊的項目符號縮進它應該。

Here is a test我寫了調試，在那裏你可以看到我的問題在行動。

所有這些都在CMS內部，因此圖像尺寸是可變的，以及文本中的段落和可能的列表。

任何解決方案？

（見我的第一個圖片評論）

Answer 1

補充一點：

ul{ list-style-position: inside} 

這就是它！

Answer 2

你可以給你的列表項的overflow屬性：

li { 
    overflow: hidden; 
} 

這將導致該列表項進行排序的行爲正確的：他們將顯示爲方形塊，繼續在圖像結束還有，他們不會很好地流向左側。下一個列表項將會。

Answer 3

如果您不打算添加javascript，那麼這裏是一個jQuery腳本，它將爲ul添加一個與圖像重疊的邊距，以便所有列表項保持對齊，然後將負邊距指定給li重疊。

$(function(){ 
    //Define a context so we only move lists inside a specified parent 
    var context = $("#test_div");  

    //Build a list of images position a size 
    var imgRects = []; 
    var imgs = $("img.left", context); 
    imgs.each(function(i){ 
     var pos = $(this).position(); 
     pos.right = pos.left + $(this).outerWidth(true); 
     pos.bottom = pos.top + $(this).outerHeight(true); 
     imgRects.push(pos);   
    }); 

    //Process each li to see if it is at the same height of an image   
    var lis = $("li", context); 
    lis.each(function(i){ 
     var li = $(this); 
     if(li.parent().css('marginLeft') != "0px"){ 
      return; //Already moved 
     } 
     var top = li.position().top; 
     for(var j in imgRects){ 
      var rect = imgRects[j]; 
      if(top > rect.top && top < rect.bottom){ 
       li.parent().css('marginLeft', rect.right); 
       return; 
      } else if(li.parent().css('marginLeft') != "0px"){ 
       li.css('marginLeft', -1 * rect.right); 
      } 
     } 
    }); 
}); 

我和你的演示頁和jQuery 1.3.2測試，它適用於FF3.5和IE8因爲圖像是在文檔的頂部。如果圖像出現在ul的中間，則第一個li將保持填充狀態。如果您需要更正此問題，請留下評論並嘗試更新腳本。

Answer 4

ul { 
    overflow: auto; 
} 

我將有沒有列表項目環繞圖像的附加優勢。

Answer 5

另一種選擇是到列表中與相對定位右移：

img+p+ul { 
    position: relative; 
    left: 1em; 
    top: 0; 
} 

Answer 6

li style="margin-left: 135px;"工作最適合我。

overflow: auto;看起來很好，但在我的HTML中纏繞着其他元素。