उल के बाईं ओर फ़्लोट की गई छवि मार्जिन/पैडिंग को अनदेखा कर रही है

Question

मेरे पास कई सूची आइटमों के साथ एक अनुक्रमित सूची के बाद एक पैराग्राफ है। मेरे पास बाईं ओर एक छवि भी तैरती है। मेरी समस्या यह है कि सूची आइटम मार्जिन/पैडिंग उस छवि द्वारा ओवरलैप किया जा रहा है।

मैं चाहता हूं कि बुलेट जो छवि के बगल में हैं, जैसे इंडेंट को चाहिए।

Here is a test मैंने डिबगिंग के लिए लिखा, जहां आप मेरी समस्या को क्रिया में देख सकते हैं।

यह सब एक सीएमएस के अंदर है, इसलिए छवि आयाम परिवर्तनीय हैं, साथ ही पैराग्राफ और पाठ में संभावित सूचियां भी हैं।

कोई समाधान?

(। चित्रों के लिए मेरी पहली टिप्पणी देखें)

Answer 1

इस जोड़ें:

ul{ list-style-position: inside} 

यह है कि!

Answer 2

आप अपनी सूची आइटम एक अतिप्रवाह संपत्ति दे सकते हैं:

li { 
    overflow: hidden; 
} 

कि सूची आइटम एक तरह से सही ढंग से व्यवहार करने के लिए कारण होगा: जहां छवि के रूप में अच्छी तरह से समाप्त होता है वे एक वर्ग ब्लॉक के रूप में प्रदर्शित करेगा जारी, वे बाईं ओर अच्छी तरह से बहती नहीं है। अगली सूची वस्तु होगी।

Answer 3

यदि आप जावास्क्रिप्ट जोड़ने के बारे में परेशान नहीं हैं, तो यहां एक jQuery स्क्रिप्ट है जो उल को मार्जिन जोड़ती है जो छवि को ओवरलैप करती है ताकि सभी सूची आइटम गठबंधन बने रहें, और उसके बाद ली के लिए नकारात्मक मार्जिन असाइन किया गया हो ओवरलैप नहीं है।

$(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 पर काम करता है, क्योंकि छवि दस्तावेज़ के शीर्ष पर है। यदि छवि उल के बीच में दिखाई देती है, तो पहले ली की गद्दी बनी रहेगी। यदि आपको इस समस्या को ठीक करने की आवश्यकता है तो एक टिप्पणी छोड़ें और स्क्रिप्ट को अपडेट करने का प्रयास करेंगे।

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 में अन्य तत्वों के साथ गड़बड़ कर घायल हो गया।