50% इनलाइन ब्लॉक एक दूसरे

के बगल में दिखाई नहीं दे रहा मैं50% इनलाइन ब्लॉक एक दूसरे

और

.ib-half { 
    display: inline-block; 
    width: 50%; 
}

है कहो मैं पक्ष-साथ प्रदर्शित करने के लिए दो फैला उम्मीद है, लेकिन वे नहीं होगा। कोई मार्जिन, पैडिंग या सीमा नहीं है, तो समस्या क्या है?

स्रोत

2012-12-12 c..

वास्तविक समस्या दो तत्वों के बीच स्थान (नई लाइन) है। चूंकि यह एक इनलाइन-ब्लॉक तत्व है, यह अंतरिक्ष को पंजीकृत करता है, इसलिए यह 50% + स्थान है।

कुछ संभावनाओं:

<span class='left'>Left</span><!-- 
--><span class='right'>Right</span>

या <span class='left'>Left</span><span class='right'>Right</span>

या

<span class='left'>Left</span><span 
class='right'>Right</span>

या मेरे लिए यह वास्तव में शायदfloat: left; करने के लिए सबसे समझ में आता है और एक display: block तत्व के लिए इसे बदल। मेरा मानना है कि इनलाइन तत्वों की प्रकृति कुछ अतिरिक्त स्पेसियल सूचनाओं के साथ पाठ के समान तरीके से संचालित होती है, तो जब कोई कारण नहीं है तो हैकी क्यों प्राप्त करें?

स्रोत

2012-12-12 02:25:44

आशा इस में मदद मिलेगी

<div>  
     <span class="ib-half"></span> 
     <span class="ib-half"></span> 
    </div> 

 
     div{ 
      width:50%; 
      display:block; 
     } 
     .ib-half { 
      margin:0; 
      display:inline-block; 
      width: 49%; 
      height:100px; 
      }

यहाँ

मैं एक माता पिता div उपयोग कर रहा हूँ और ब्लॉक करने के लिए इसकी चौड़ाई और प्रदर्शन संपत्ति की स्थापना। बाल ब्लॉक में आप डिस्प्ले प्रॉपर्टी को इनलाइन-ब्लॉक में सेट कर सकते हैं, और यदि आप अधिक अवधि को जोड़ना चाहते हैं तो आप स्पैन ब्लॉक 100/(ब्लॉक के ब्लॉक) की चौड़ाई को कम करके जोड़ सकते हैं -1। परिणाम प्राप्त करने के लिए आप फ्लोट संपत्ति का भी उपयोग कर सकते हैं।

स्रोत

2012-12-12 02:47:33

चूंकि यह आधा है, इसे 49% पर सेट करना बिल्कुल समझ में नहीं आता है! –

या आप लिख रहे हैं .. मुझे कभी पता नहीं था कि फ़ॉन्ट आकार एक फर्क पड़ता है .. धन्यवाद .. –

आप मेरा जवाब वोट दे सकते हैं;) –

सेट करने के लिए मूल तत्व के शून्य आकार एक फिक्स हो सकता है।

HTML:

<div class = "parent"> 
    <span class="ib-half">Left</span> 
    <span class="ib-half">Right</span> 
</div>

सीएसएस:

span{ 
    background:#bdbdbd; 
} 

.ib-half { 
    display: inline-block; 
    width: 50%; 
    font-size:10px; 
} 

.parent { 
    font-size: 0; 
}

चेक इस बेला। http://jsfiddle.net/YpTMh/9/

अधिक विकल्पों के लिए http://css-tricks.com/fighting-the-space-between-inline-block-elements/

स्रोत

2012-12-12 02:50:28

यह स्वीकार्य उत्तर होना चाहिए। चूंकि इनलाइन-ब्लॉक इनलाइन प्रवाह का हिस्सा हैं क्योंकि यह रिक्त स्थान से प्रभावित होता है। फ़ॉन्ट आकार सेट करना: 0 प्रभावी रूप से उस स्थान 0 चौड़ाई को बनाता है। – hesselbom

css3 में अच्छा जवाब का संदर्भ लें है:

white-space: nowrap;

माता पिता नोड में

, और:

white-space: normal; 
vertical-align: top;

div (या अन्य) में 50 पर %

उदाहरण: http://jsfiddle.net/YpTMh/19/

स्रोत

2015-02-03 19:14:04 Matrix

50% इनलाइन ब्लॉक एक दूसरे

उत्तर

संबंधित मुद्दे