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> 

अद्यतन: हल। सीएसएस में, लागू

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

Answer 1

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

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

Answer 2

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

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

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

.cell{display:inline-block} 

यह मुश्किल है आप को देने के लिए आपका मूल कोड देखे बिना समाधान।

Answer 3

और को li तत्व पर सेट करें?

Answer 4

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

display:block; उपयोग display:inline-block;

Answer 5

के बजाय इस प्रयास करें:

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

Answer 6

उपयोग display: table।

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

Answer 7

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

width: max-content;

नोट: समर्थन समर्थन ब्राउज़रों की एक पूरी टूटने