एचटीएमएल लेआउट व्हाइटस्पेस-अज्ञेयवादी कैसे बनाएं?

संपादित करें: Removing whitespace between HTML elements when using line breaks पर लगभग एक ही सवाल है, हालांकि "फ्लोट" सुझाव के अलावा मुझे अपनी आवश्यकताओं के लिए उपयुक्त उत्तरों में से कोई भी नहीं मिला है। मैं इसे अधिक अभिनव सुझावों के लिए खुला रहना चाहूंगाएचटीएमएल लेआउट व्हाइटस्पेस-अज्ञेयवादी कैसे बनाएं?

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

उदाहरण:

<span>a</span><span>b</span>

स्थान के कारण

inbetween:

<span>a</span> 
<span>b</span>

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

मुझे लगता है कि इन विकल्पों बदसूरत हैं:

1) ट्वीक text-indent, margin, padding आदि (क्योंकि यह font-size पर निर्भर हो सकता है, डिफ़ॉल्ट सफेद-अंतरिक्ष चौड़ाई आदि)

2) लाना एक दूसरे के बगल में, एक ही पंक्ति पर सबकुछ।

3) शून्य font-size। इसके लिए ब्लॉक में फ़ॉन्ट आकार को ओवरराइड करने की आवश्यकता होगी, जो अन्यथा विरासत में प्राप्त होगी।

4) संभावित दस्तावेज़-व्यापी समाधान। मैं चाहता हूं कि समाधान एचटीएमएल के एक निश्चित ब्लॉक के लिए स्थानीय रहें।

कोई विचार, कोई स्पष्ट बिंदु जो मुझे याद आ रही है?

स्रोत

2010-04-07 Sedat Kapanoglu

आपको तत्वों के बीच में कोई स्थान नहीं होने के साथ संस्करण का उपयोग नहीं करना चाहिए, बस सब कुछ अंतरिक्ष के साथ काम करें। सही लेआउट प्राप्त करने के लिए आपको शायद इनलाइन तत्वों को display:block पर सेट करने की आवश्यकता होगी।

this similar question of mine पर एक नज़र डालें, जिसमें कुछ अच्छे उत्तर हैं।

संपादित करें: ऊपर सवाल पर जवाब से एक एक अंतिम उपाय के रूप एचटीएमएल टिप्पणियों का उपयोग कर पता चलता है, उदा .:

<span>a</span><!-- 
--><span>b</span>

स्रोत

2010-04-07 21:30:59 Skilldrick

तुम कैसे शुद्ध मान निर्दिष्ट किए बिना और व्हाइटस्पेस साथ 'block's साथ यह क्या करते हो? –

ओह लिंक के लिए धन्यवाद, अन्य सवाल नहीं मिला। ऐसा लगता है कि फ्लोट ऐसा करने का स्थापित तरीका है। –

मैं हाल ही में एक प्लगइन मैं विकसित कर रहा था के साथ इस एक ही समस्या थी। चूंकि मैं inline-block का उपयोग कर रहा था, और चूंकि प्लगइन को तत्वों के बीच बिल्कुल शून्य स्थान की आवश्यकता थी, और मुझे कभी पता नहीं था कि तत्व क्या हो सकते हैं, मुझे ऐसे समाधान के साथ आना पड़ा जिसके लिए कोई उपयोगकर्ता हस्तक्षेप नहीं था।

देखो:

function removeWhiteSpace(raw) { 
    var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, ""); 
    return cleaned_string; 
}

जावास्क्रिप्ट मुद्दे पर केवल वास्तविक समाधान हो रहा है। मैं jQuery का उपयोग करके HTML डेटा खींचता हूं, और उसके बाद इसे साफ़ करने के लिए इसे इस फ़ंक्शन के माध्यम से चलाता हूं।

स्रोत

2010-04-07 21:31:15 dclowd9901

मैं इसके लिए जाने से बचना चाहता हूं क्योंकि जावास्क्रिप्ट डीओएम मैनिपुलेशन बहुत महंगा है (विशेष रूप से मोबाइल उपकरणों पर डीओएम अपडेट, लेआउट गणना और पुनर्भुगतान)। फ्लोट मेरे मामले में ठीक काम किया। –

यदि आपकी समस्या अनावश्यक रिक्तियां या अलग डिवीजनों/का उपयोग कर "उल" उचित सीएसएस के साथ अपनी नौकरी/

कर सकते हैं ज़ाहिर है reset.css है/है

एचटीएमएल:

<ul id="uList"> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
</ul>

सीएसएस:

ul#uList, ul#uList li, ul#uList li img{display:block; float:left;}

स्रोत

2010-04-08 00:15:24 spielersun

यह यूएल या एलआई से संबंधित नहीं है। यह वास्तव में "फ्लोट" है जो यहां समस्या को हल करता है। (अन्य प्रश्न देखें) –

तुम भी इस्तेमाल कर सकते हैं word-spacing:

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<title>Inline-blocks without whitespace between</title> 
<style> 
html, 
body 
    { 
     background:  #fff; 
     padding:  0; 
     margin:   0; 
    } 
p 
    { 
     background:  #9ab; 
     text-align:  center; 
     margin:   50px; 
     padding:  0 20px; 

     word-spacing: -.3em; 
    } 
span 
    { 
     display:  inline-block; 
     padding:  3px; 
     color:   #def; 
     background:  #678; 
     word-spacing: normal; 
    } 
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    /** 
    * Since WebKit fails on word-spacing for 
    * inline-block … we have to hack. 
    */ 
    span 
     { 
      margin:   0 -.2em; 
     } 
} 
</style> 

<p> 
    <span>Inline-block<br>number 1</span> 
    <span>Inline-block<br>number 2</span> 
    <span>Inline-block<br>number 3</span> 
</p>

Live demo

स्रोत

2010-04-08 03:03:06 fuxia

यह अच्छा है लेकिन मार्जिन/पैडिंग/इंडेंट के निर्दिष्ट करने से कहीं अलग नहीं लगता है। "-.3em" क्या इंगित करता है? और जब मैं ब्लॉक में इस्तेमाल किए गए फ़ॉन्ट को बदलता हूं तो यह क्या संकेत देगा? –

'.3em' अंतरिक्ष वेब ब्राउज़र आमतौर पर सामान्य सफेद स्थान के लिए लेते हैं। आप किसी भी फ़ॉन्ट को इनलाइन ब्लॉक के लिए ले सकते हैं - शब्द-रिक्ति को 'पी' के फ़ॉन्ट से गणना की जाती है। 'मार्जिन' या 'टेक्स्ट इंडेंट' का मुख्य अंतर तब दिखाई देता है जब इनलाइन ब्लॉक उनके मूल तत्व के किनारे से टकराते हैं: ऋणात्मक मार्जिन उन्हें मूल बॉक्स से बाहर निकाल देता है। और 'पैडिंग' वैसे भी आपकी समस्या का समाधान नहीं कर सकता है। – fuxia

एचटीएमएल लेआउट व्हाइटस्पेस-अज्ञेयवादी कैसे बनाएं?

उत्तर

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