html - मेरी सूची आइटम बुलेट फ़्लोटिंग तत्वों को ओवरलैप क्यों करते हैं




css (16)

समाधान उतना आसान है जितना:

ul {overflow: hidden;}

overflow: एक ब्लॉक बॉक्स overflow: visible अलावा इसकी सामग्री के लिए एक नया ब्लॉक प्रारूपण संदर्भ स्थापित करता है । डब्ल्यू 3 सी सिफारिश: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

उदाहरण:

मेरी वेबसाइट पर बटन, जो छिपाने में <li> हैं, इस तरह बने हैं। कार्रवाई में इंडेंटिंग देखने के लिए अपने ब्राउज़र के व्यूपोर्ट (विंडो) को छोटा बनाएं।

संबंधित उत्तर:

  • https://stackoverflow.com/a/710264/2192488
  • https://stackoverflow.com/a/16041390/2192488

उदाहरण के साथ लेख:

मेरे पास एक (एक्सएचटीएमएल सख्त) पृष्ठ है जहां मैं पाठ के नियमित पैराग्राफ के साथ एक छवि तैरता हूं। सब ठीक है, सिवाय इसके कि जब अनुच्छेदों के बजाय एक सूची का उपयोग किया जाता है। सूची की गोलियां फ़्लोटेड छवि को ओवरलैप करती हैं।

सूची या सूची आइटम के मार्जिन को बदलने से मदद नहीं मिलती है। मार्जिन की गणना पृष्ठ के बाईं ओर की जाती है, लेकिन फ्लोट सूची आइटम को दाईं ओर दाईं ओर धक्का देता है। इसलिए मार्जिन केवल तभी मदद करता है जब मैं इसे छवि से अधिक व्यापक बना देता हूं।

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

li { list-style-position: inside } सेट करना गोलियों को सामग्री के साथ ले जाता है, लेकिन यह उन पंक्तियों का भी कारण बनता है जो बुलेट के साथ गठबंधन शुरू करने के लिए ऊपर की रेखा के साथ गठबंधन करने के बजाय लपेटते हैं।

समस्या स्पष्ट रूप से बॉक्स के बाहर प्रस्तुत की जाने वाली बुलेट के कारण होती है, जो कि बॉक्स की सामग्री को दाईं ओर धक्का दे रहा है (बॉक्स स्वयं नहीं)। इस प्रकार आईई और एफएफ स्थिति को संभालते हैं, और जहां तक ​​मुझे पता है, कल्पना के अनुसार गलत नहीं है। सवाल यह है कि, मैं इसे कैसे रोक सकता हूं?


अस्वीकरण

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

पैराग्राफ के बीच केंद्रित छवियों का एक सरल डिज़ाइन बहुत आकर्षक लगेगा और बहुत फैंसी पाने की कोशिश करने से समर्थन करना बहुत आसान होगा। यह एक <figure> से भी एक कदम दूर है।

लेकिन मैं वास्तव में फ्लोट छवियों चाहता हूँ!

ठीक है, तो यदि आप इस पथ को जारी रखने के लिए पर्याप्त पागल हैं, तो कुछ तकनीकों का उपयोग किया जा सकता है।

सूची का उपयोग overflow: hidden उपयोग करना सबसे आसान है overflow: hidden या overflow: scroll ताकि सूची अनिवार्य रूप से लपेटा जा सके जो पैडिंग को वापस जहां उपयोगी हो, खींचती है:

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

हालांकि इस तकनीक में कुछ समस्याएं हैं। यदि सूची लंबी हो जाती है, तो यह वास्तव में छवि के चारों ओर लपेटती नहीं है, जो छवि पर float का उपयोग करने के पूरे उद्देश्य को काफी हद तक हरा देती है।

img {
  float: left;
}
.wrapping-list {
  overflow: hidden;
  padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

लेकिन मैं वास्तव में रैपिंग सूचियों चाहता हूँ!

ठीक है, तो यदि आप भी अधिक दृढ़ता से पागल हैं और आपको बिल्कुल इस पथ को जारी रखना होगा , तो एक और तकनीक है जिसका उपयोग सूची आइटम को लपेटने और गोलियों को बनाए रखने के लिए किया जा सकता है।

<ul> को पैड करने और इसे गोलियों के साथ अच्छी तरह से व्यवहार करने की कोशिश करने के बजाय (जो ऐसा कभी नहीं करना चाहता), उन गोलियों को <ul> से दूर ले जाएं और उन्हें <li> s पर दें। बुलेट खतरनाक हैं, और <ul> बस उन्हें ठीक से संभालने के लिए पर्याप्त ज़िम्मेदार नहीं है।

img {
  float: left;
}
.wrapping-list {
  padding: 0;
  list-style-position: inside;
}
.wrapping-list li {
  overflow: hidden;
  padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

यह रैपिंग व्यवहार जटिल सामग्री के लिए अजीब चीजें कर सकता है, इसलिए मैं इसे डिफ़ॉल्ट रूप से जोड़ने की अनुशंसा नहीं करता हूं। इसे किसी ऐसे चीज़ के रूप में सेट करना बहुत आसान है जिसे ओवरराइड किए जाने वाले किसी चीज़ के बजाय चुना जा सकता है।


आप position: relative; left: 10px; असाइन कर सकते हैं position: relative; left: 10px; position: relative; left: 10px; li । (आप इसे अतिरिक्त रूप से margin-right: 10px; देना चाहते हैं margin-right: 10px; अन्यथा यह दाएं तरफ बहुत व्यापक हो सकता है।)

या, यदि आप ul लिए float का उपयोग करना चाहते हैं - जैसा कि दूसरों द्वारा सुझाया गया है - आप संभवतः उल का उपयोग करके उल के फ़्लोटिंग दाएं से बाकी को रोक सकते हैं clear: left उल के बाद वाले तत्व पर clear: left


आप ul को बाईं तरफ तैरने का प्रयास कर सकते हैं, और इसके लिए उपयुक्त width परिभाषित कर सकते हैं, ताकि यह छवि के बगल में तैर सके।

इस jsfiddle की तरह थोड़ा कुछ?


इस बारे में कैसा है?

ul{float:left; clear:right}

इसे इस्तेमाल करे:

li{
    margin-left:5px;
}

यदि आप उन्हें बाएं जाना चाहते हैं, तो बस एक - ## पीएक्स मान डालें।


कई परियोजनाओं में इस दिलचस्प मुद्दे से लड़ने के बाद, और यह जांचने के बाद, मुझे अंत में विश्वास है कि मुझे दोनों मिलते हैं: एक कामकाजी और 'उत्तरदायी' समाधान।

यहां जादू चाल है, लाइव उदाहरण: http://jsfiddle.net/superKalo/phabbtnx/

ul {
    list-style: none;
    position: relative;
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    left: 35px;
}
li {
    padding-left: 0; /* remove any left padding */
    margin-left: 0; /* remove any left margin */
    text-indent: -19px; /* adjust as much as needed */
}
li:before {
    content: '•\00a0\00a0\00a0';
    color: #000; /* bonus: you can customize the bullet color */
}

डॉक्टर के सिर तक पहुंच के बिना एलएमएस के अंदर काम करना, margin-right: 20px छवि के लिए एक इनलाइन शैली के रूप में जाना आसान पाया। जो मुझे इस site देय है।


मैं इस समस्या को हल करने के लिए इसका उपयोग कर रहा हूं:

ul {
   display: table;
}

मैंने इसे ठीक किया

div.class-name ul {
  clear: both;
}

या आप यह कर सकते हैं:

 #content ul {
        background:none repeat scroll 0 0 #AACCDD;
        float:left;
        margin-right:10px;
        padding:10px;

और फिर ली से सभी स्टाइल हटा दें


http://archivist.incutio.com/viewlist/css-discuss/106382 मुझे एक सुझाव मिला जो मेरे लिए काम करता था: शैली 'ली' तत्वों के साथ:

position: relative;
left: 1em;

जहां आप बाएं पैडिंग / मार्जिन की चौड़ाई के साथ "1em" को प्रतिस्थापित करते हैं, जहां फ्लोट मौजूद नहीं होने पर आपकी सूची आइटमों में होगा। यह मेरे आवेदन में बहुत अच्छा काम करता है, यहां तक ​​कि मामले को संभालने के लिए जहां सूट के नीचे सूचियों के बीच में होता है - गोलियां वापस (स्थानीय) बाएं मार्जिन पर वापस आती हैं।


display:table; जोड़ें display:table; ul करने के लिए:

ul{display:table;}

overflow: auto; जोड़कर overflow: auto; कम से कम मेरे लिए आपके ul काम करता है।

अद्यतन करें

मैंने अपने जेएसफ़िल्ड को यह देखने के लिए अपडेट किया है कि क्या हो रहा है। फ़्लोटिंग img बगल में ul होने पर, ul की सामग्री को फ्लोट द्वारा धक्का दिया जाएगा, लेकिन वास्तविक कंटेनर नहीं। overflow: auto जोड़कर overflow: auto को पूरे ul बॉक्स को केवल सामग्री की बजाय फ्लोट द्वारा धक्का दिया जाएगा।


width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

मार्जिन-बाएं: ऑटो तत्व को स्वयं को गठबंधन करने का कारण बन जाएगा। जिस तत्व को आप चाहते हैं उसकी ऊंचाई और चौड़ाई निर्धारित करें - मेरे अंदर एक div में पृष्ठभूमि छवि है


width: auto; overflow: hidden;




css