ulの左側のフローティングイメージはマージン/パディングを無視しています

Question

段落の後に順序付けされていないリストがいくつかあります。私はまた、その左に浮かんだイメージを持っています。私が抱えている問題は、リストアイテムのマージン/パディングがそのイメージによってオーバーラップしているということです。

イメージの横にある箇条書きをインデントする必要があります。

Here is a test私はあなたが行動に私の問題を見ることができ、デバッグのために書き上げました。

このすべては、CMSの内側にあるので、画像の大きさは可変であるだけでなく、テキスト内の段落や可能性を示します。

すべてのソリューションはありますか？

（。写真は私の最初のコメントを参照してください）

Answer 1

これを追加します。

ul{ list-style-position: inside} 

それだそれ！

Answer 2

あなたのリスト項目overflowプロパティを与えることができます：リスト項目がソートの正しく動作するようになります

li { 
    overflow: hidden; 
} 

：画像が同様に終わるところ彼らは継続的、正方形のブロックとして表示されます、彼ら左にうまく流れません。次のリスト項目が表示されます。

Answer 3

もしあなたがjavascriptの追加を気にかけなければ、ここでは、すべてのリスト項目が整列したままになるように画像に重なるulに余白を追加するjQueryスクリプトがあり、次にその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の他の要素でうんざりしていました。