बिना किसी सामग्री के एक div कैसे एक चौड़ाई बनाने के लिए है?

110

मैं एक चौड़ाई जोड़ने की कोशिश कर रहा हूँ div, लेकिन मुझे लगता है कि यह एक समस्या है क्योंकि इसमें कोई सामग्री नहीं है।

यहां मेरे पास अभी तक सीएसएस और HTML है, लेकिन यह काम नहीं कर रहा है:

सीएसएस

body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}

एचटीएमएल

<body>
  <div id="test">
    <ul>
      <li>
        <div class="test1">width1</div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
    </ul>
 </div>

— runeveryday
स्रोत

158

एक चौड़ाई के लिए एक div को आमतौर पर कम से कम एक गैर-ब्रेकिंग स्पेस (& nbsp;) की आवश्यकता होती है।

— jcomeau_ictx
स्रोत

28

"प्रदर्शन: इनलाइन-ब्लॉक" का उपयोग करें

— लुकास

अच्छा समाधान, अगर मैं & nbsp के बजाय "" का उपयोग करता हूं; यह काम नहीं करता है। लेकिन क्यों?

— अमिताभ

1

'& nbsp;' न्यूनतम ऊंचाई के विपरीत एक अच्छी तकनीक है क्योंकि यह ऊंचाई को मजबूर नहीं करती है। मान लें कि आपका फ़ॉन्ट-आकार 16px पर सेट है और आपकी गद्दी 15px है। पाठ से पहले और बाद में आपकी div एक ही ऊँचाई को बनाए रखेगी (div पर सभी को एक पंक्ति में मानते हुए)

— eroedig

मेरे लिए, एक जगह डाल काम नहीं करता है! चौड़ाई 100px और भीतर & nbsp के साथ div; फ्लेक्स इनलाइन तत्वों के साथ एक div में 100px होने की तरह नहीं दिखता है

— मिकी

89

खाली उपयोग करने के लिए या तो उपयोग करें padding, heightया &nbspचौड़ाई के लिएdiv

संपादित करें:

गैर शून्य min-heightभी महान काम करता है

— संदूक
स्रोत

5

मैं पैडिंग समाधान पसंद करता हूं, 0 से अधिक कोई भी पैडिंग काम करेगा। इस तरह आप एक अजीब नहीं है, में चयन करने योग्य  है div।

— ब्रायन डंकन

1

कृपया ध्यान दें: पैडिंग सॉल्यूशन के लिए आपको काम करने के लिए लेफ्ट / राइट और टॉप / बॉटम पैडिंग दोनों उपलब्ध कराना होगा ।

— गोविंद राय

62

min-height: 1px; सब कुछ का उपयोग कम से कम 1px की न्यूनतम ऊंचाई है, इसलिए कोई अतिरिक्त स्थान nbsp या गद्दी के साथ नहीं लिया जाता है, या पहले ऊँचाई जानने के लिए मजबूर किया जाता है।

— रिले
स्रोत

2

आपका समाधान मुझे सबसे साफ लगता है, लेकिन मैं सीएसएस कल्पना में इसका कारण खोजने की कोशिश कर रहा हूं और मुझे यह कहीं भी नहीं मिल रहा है, मुझे मिला निकटतम वह है CSS 2.1, 9.5 Floatsजहां यह कहता है Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., लेकिन यह लाइन बक्से यानी लाइनों के बारे में बात करता है एक पैराग्राफ में, लेकिन आसन्न बक्से के बारे में नहीं। किसी को सीएसएस कल्पना से अधिक परिचित?

— जैम हैब्टलजेल

इसने मेरे लिए सबसे अच्छा काम किया। मैंने & nbsp; को छोड़कर अन्य सुझावों में से अधिकांश को यहाँ आज़माया;

— अयाहुस्का

28

अपनी div में शून्य-चौड़ाई-स्थान जोड़ने के लिए CSS का उपयोग करें। Div की सामग्री कोई जगह नहीं लेगी लेकिन div को प्रदर्शित करने के लिए मजबूर करेगी

.test1::before{
   content: "\200B";
}

— BernardV
स्रोत

9

इसमें चौड़ाई है लेकिन कोई सामग्री या ऊँचाई नहीं है। वर्ग test1 में एक ऊंचाई विशेषता जोड़ें।

— माइकल
स्रोत

7

खाली DIV को बनाने float: leftया float: rightदिखने के लिए अलग-अलग तरीके हैं ।

यहाँ उन लोगों को प्रस्तुत करता हूँ जिन्हें मैं जानता हूँ:

सेट width(या min-width) के साथ height(या min-height)
या सेट padding-top
या सेट padding-bottom
या सेट border-top
या सेट border-bottom
या छद्म तत्वों का उपयोग करें : ::beforeया इसके ::afterसाथ:
- {content: "\200B";}
- या {content: "."; visibility: hidden;}
या  DIV के अंदर रखें (यह कभी-कभी अप्रत्याशित प्रभाव ला सकता है। उदाहरण के लिए text-decoration: underline;)

— simhumileco
स्रोत

1

display:block;अपने test1 में जोड़ने का प्रयास करें

— DevenX
स्रोत

1

जवाब देने में बहुत देर हो गई, लेकिन फिर भी।

सीएसएस का उपयोग करते हुए, डिव (सामग्री-कम) को स्टाइल करने के लिए, डिव को दृश्यमान बनाने के लिए मिन-ऊंचाई संपत्ति को "n" पीएक्स पर सेट किया जाना चाहिए (वेबकिट्स और क्रोम के साथ काम करता है, जबकि यह सुनिश्चित नहीं है कि यह चाल IE6 और पर काम करेगी) कम)

कोड:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}

<div class="shape-round"></div>

स्निपेट का विस्तार करें

— भास्कर प्रमाणिक
स्रोत

0

 चाल कर सकते हैं; XSL डॉक्स में काम करता है

— डैनियल फॉरेस्ट
स्रोत

0

मेरी भी यही समस्या थी। मैं चाहता था कि आइकन बटन दबाकर दिखाई दें, लेकिन बिना किसी हरकत के और एनवायरमेंट को खिसकाकर, बल्ब की तरह: ऑन और ऑफ, दिखाई और डिसएपियर हो गया, इसलिए मुझे निश्चित आकारों के साथ एक खाली डिव बनाने की जरूरत थी।

width: 13px;
min-width: 13px;

मेरे लिए चाल चली

— deathfry
स्रोत

-1

आप इस DIV के सीएसएस में जोड़ें position: relative, यह सभी काम करेगा।

— Krzysztof AN
स्रोत