100% चौड़ाई के बिना प्रदर्शन ब्लॉक

Question

मैं प्रदर्शन संपत्ति का उपयोग करके किसी अन्य तत्व के नीचे प्रदर्शित करने के लिए एक स्पैन तत्व सेट करना चाहता हूं। मैंने इनलाइन-ब्लॉक को लागू करने की कोशिश की, लेकिन सफलता के बिना, और लगा कि मैं ब्लॉक का उपयोग कर सकता हूं अगर मैं किसी तरह तत्व को 100% की चौड़ाई देने से बचने में कामयाब रहा (मैं नहीं चाहता कि तत्व "बाहर निकालना")। क्या यह किया जा सकता है, या यदि नहीं, तो इस तरह के मुद्दे को हल करने के लिए क्या अच्छा है?

उदाहरण: एक समाचार सूची जहाँ मैं प्रत्येक पोस्ट के अंत में एक "अधिक पढ़ें" लिंक सेट करना चाहता हूं (नोट: <a>इसके बजाय <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

अद्यतन: हल किया गया। CSS में, आवेदन करें

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

Comments

क्या आपको हमें दिखाने के लिए कोई मार्कअप (HTML या CSS) मिला है? वास्तव में काम करने के लिए कुछ भी बिना समस्या पर काम करना मुश्किल है। इसके अलावा jsfiddle पर एक डेमो अच्छा होगा।

— टॉम ऑक्ले

सोचा कि मुझे किसी नमूना कोड की आवश्यकता नहीं है क्योंकि यह एक स्पैन तत्व की स्थिति के बारे में है। अपडेटेड पोस्ट देखें।

— स्टाफन एस्टबर्ग

आप नीचे दिए गए उल्लेख के अनुसार कोड की सिर्फ एक पंक्ति का उपयोग करके उस सभी मार्कअप को गंभीरता से काट सकते हैं।

— ha404

Answer 1

यदि मैं आपके प्रश्न को ठीक से समझ रहा हूं, तो निम्नलिखित सीएसएस आपके नीचे दिए गए विस्तार को फ़्लोट करेगा और इसे 100% चौड़ाई से रखेगा:

a {
    display: block; 
    float: left; 
    clear: left; 
}

Comments

मैंने इसे लागू करने की कोशिश की लेकिन चूंकि स्पैन एलिमेंट्स (शीर्षक और तारीख, उदाहरण में) में फ्लोट नहीं है, इसलिए लिंक अंतिम स्पैन से पहले पोस्ट हो जाता है। लगता है कि एक समाधान के लिए सभी बच्चों को ली फ्लोट में तत्व बनाना होगा।

— स्टाफन एस्टबर्ग

यह काम करता है अगर मैं ली माता-पिता के लिए एक स्पष्ट उपसर्ग लागू करता हूं। इस समाधान के साथ जाएंगे, धन्यवाद पीजे।

— कर्मचारी एस्टबर्ग

Answer 2

का उपयोग करें display: table।

यह उत्तर कम से कम 30 वर्णों का होना चाहिए; मैंने 20 में प्रवेश किया, इसलिए यहां कुछ और है।

Comments

प्रतिभाशाली समाधान। margin: 0 auto;अगर आपको इसकी आवश्यकता है तो इसे केंद्रित करें।

— माफिया

मुझे लगता है कि तुम कमाल हो।

— बिलिन्हा

display: table;काम करता है, लेकिन कोई पैडिंग स्वीकार नहीं करता है।

— दान

@ ha404 आप सही हैं, पैडिंग काम करता है! jsfiddle.net/wgj7xvLe/4 कम से कम मेरे ब्राउज़र (क्रोमियम) में।

— दान

जब तक आप सीमा-पतन का उपयोग करते हैं, तब तक @donquixote को स्वीकार करना चाहिए: अलग। बस उस समस्या थी।

— ब्रैड

Answer 3

आप उपयोग कर सकते हैं:

width: max-content;

नोट: समर्थन सीमित है, समर्थन ब्राउज़रों के पूर्ण विराम के लिए यहां देखें

Comments

मैं इस बारे में कभी नहीं सुना था! दिलचस्प।

— रयान

Chrome 46 और FF 66 के बाद से अच्छा था। उत्तर स्वीकार किया जाना चाहिए। inline-blockएट अल मेरे लेआउट को तोड़ रहा था।

— ०३६__

@ i336_ आज तक यह एज ब्राउज़र द्वारा समर्थित नहीं है।

— क्रिस

एज, या क्रोमियम एज? (स्पष्ट होने के लिए, पूर्व काफी समय के लिए बाहर होने जा रहा है ...)

— i336_

Answer 4

मैं प्रत्येक पंक्ति को अपने स्वयं के div में रखूंगा, इसलिए ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

और फिर सीएसएस के लिए:

.cell{display:inline-block}

आपका मूल कोड देखे बिना आपको समाधान देना कठिन है।

Comments

धन्यवाद, लेकिन मैं किसी भी div तत्वों में मिश्रण नहीं करना चाहूंगा।

— स्टाफन एस्टबर्ग

Answer 5

फिर से: एक उत्तर जो थोड़ा बहुत देर हो सकता है (लेकिन उन लोगों के लिए जो उत्तर के लिए इस पृष्ठ को ढूंढते हैं)।

display:block;उपयोग के बजाय display:inline-block;

Answer 6

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

li a {
    width: 0px;
    white-space:nowrap;
}

Answer 7

मेरे पास यह मुद्दा था, मैंने इसे इस तरह हल किया:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"श्वेत-स्थान: Nowrap" यह सुनिश्चित करता है कि यदि पर्याप्त स्थान नहीं है, तो बच्चे के बच्चे (यदि इसके पास कोई भी है) तो नई रेखा से न लिपटें।

"व्हाइट-स्पेस: नोवरैप" के बिना:

"व्हाइट-स्पेस: नॉवरैप" के साथ:

---

संपादित करें: ऐसा लगता है कि यह सिर्फ मेरे लिए बच्चे के ब्लॉक भाग के बिना भी काम करता है, इसलिए बस यह ठीक काम करने लगता है।

.parent {
  white-space: nowrap;
  display: table;
}

Answer 8

आप निम्नलिखित का उपयोग कर सकते हैं:

display: inline-block;

लिंक और अन्य तत्वों पर अच्छी तरह से काम करता है।