html - सभी तत्वों का इलेक्ट्रॉनिक विन्यास




मैं इनलाइन-ब्लॉक तत्वों के बीच की जगह कैसे हटा सकता हूं? (20)

CSS3 अनुरूप ब्राउज़र के लिए white-space-collapsing:discard

देखें: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

इस एचटीएमएल और सीएसएस को देखते हुए:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

नतीजतन, स्पैन तत्वों के बीच एक 4 पिक्सेल चौड़ी जगह होगी।

डेमो: http://jsfiddle.net/dGHFV/

मैं समझता हूं कि ऐसा क्यों होता है, और मुझे यह भी पता है कि मैं HTML स्रोत कोड में SPAN तत्वों के बीच श्वेत-स्थान को हटाकर उस स्थान से छुटकारा पा सकता हूं, जैसे:

<p>
    <span> Foo </span><span> Bar </span>
</p>

हालांकि, मैं एक सीएसएस समाधान की उम्मीद कर रहा था जिसके लिए एचटीएमएल स्रोत कोड को छेड़छाड़ की आवश्यकता नहीं है।

मुझे पता है कि जावास्क्रिप्ट के साथ इसे कैसे हल करें - कंटेनर तत्व (पैराग्राफ) से टेक्स्ट नोड्स को हटाकर, जैसे:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

डेमो: http://jsfiddle.net/dGHFV/1/

लेकिन क्या इस मुद्दे को अकेले सीएसएस के साथ हल किया जा सकता है?


PHP ब्रैकेट के साथ:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


आम तौर पर हम इस तरह के तत्वों को अलग-अलग लाइनों में उपयोग करते हैं, लेकिन display:inline-block मामले में display:inline-block उसी लाइन में टैग का उपयोग करके display:inline-block अंतरिक्ष को हटा देगा, लेकिन एक अलग पंक्ति में नहीं होगा।

एक अलग पंक्ति में टैग के साथ एक उदाहरण:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

एक ही पंक्ति में टैग के साथ उदाहरण

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>

एक अन्य कुशल विधि एक सीएसएस नौकरी है जो font-size:0 तत्व का उपयोग कर रही है font-size:0 पैरेंट तत्व के लिए और जितनी चाहें उतनी ही बच्चे तत्व को font-size दें।

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

उपर्युक्त विधियां पूरे आवेदन के आधार पर कहीं भी काम नहीं कर सकती हैं, लेकिन अंतिम विधि इस स्थिति के लिए एक मूर्खतापूर्ण समाधान है और कहीं भी इसका उपयोग किया जा सकता है।


इनलाइन ब्लॉक तत्वों से रिक्त स्थान हटाएं। कई विधियां हैं:

  1. नकारात्मक मार्जिन

    div a {
        display: inline - block;
        margin - right: -4 px;
    }
    
  2. फ़ॉन्ट आकार शून्य करने के लिए

    nav {
        font - size: 0;
    }
    nav a {
        font - size: 16 px;
    }
    
  3. समापन टैग छोड़ें

    < ul >
        < li > one
        < li > two
        < li > three
    < /ul>
    

चूंकि यह उत्तर अपेक्षाकृत लोकप्रिय हो गया है, इसलिए मैं इसे काफी लिख रहा हूं।

चलिए पूछे गए वास्तविक प्रश्न को न भूलें:

इनलाइन-ब्लॉक तत्वों के बीच की जगह को कैसे हटाया जाए? मैं एक सीएसएस समाधान की उम्मीद कर रहा था जिसके लिए HTML स्रोत कोड को छेड़छाड़ की आवश्यकता नहीं है। क्या इस मुद्दे को अकेले सीएसएस के साथ हल किया जा सकता है?

अकेले सीएसएस के साथ इस समस्या को हल करना संभव है, लेकिन कोई पूरी तरह से मजबूत सीएसएस फिक्स नहीं हैं।

मेरे शुरुआती उत्तर में जो समाधान था, वह मूल तत्व में font-size: 0 जोड़ना था, और फिर बच्चों पर एक समझदार font-size घोषित करना था।

http://jsfiddle.net/thirtydot/dGHFV/1361/

यह सभी आधुनिक ब्राउज़रों के हाल के संस्करणों में काम करता है। यह आईई 8 में काम करता है। यह सफारी 5 में काम नहीं करता है, लेकिन यह सफारी में काम करता है 6. सफारी 5 लगभग एक मृत ब्राउज़र है ( 0.33%, अगस्त 2015 )।

सापेक्ष फ़ॉन्ट आकार वाले अधिकांश संभावित मुद्दे ठीक करने के लिए जटिल नहीं हैं।

हालांकि, यह एक उचित समाधान है यदि आपको विशेष रूप से केवल एक सीएसएस की आवश्यकता है, तो यह ठीक नहीं है कि अगर आप अपना एचटीएमएल बदलने के लिए स्वतंत्र हैं (जैसा कि हम में से अधिकांश हैं)।

यह वही है जो मैं एक अनुभवी अनुभवी वेब डेवलपर के रूप में हूं, वास्तव में इस समस्या को हल करने के लिए करता हूं:

<p>
    <span>Foo</span><span>Bar</span>
</p>

हाँ य़ह सही हैं। मैं इनलाइन-ब्लॉक तत्वों के बीच HTML में व्हाइटस्पेस को हटा देता हूं।

यह आसान है। यह आसान है। यह हर जगह काम करता है। यह व्यावहारिक समाधान है।

आपको कभी-कभी सावधानीपूर्वक विचार करना पड़ता है कि व्हाइटस्पेस कहां से आएगा। जावास्क्रिप्ट के साथ एक और तत्व जोड़ना whitespace जोड़ें? नहीं, अगर आप इसे ठीक से नहीं करते हैं।

आइए व्हाट्स स्पेस को हटाने के विभिन्न तरीकों की जादुई यात्रा पर जाएं, कुछ नए एचटीएमएल के साथ:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • आप ऐसा कर सकते हैं, जैसा कि मैं आमतौर पर करता हूं:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>
    

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • या यह:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • या, टिप्पणियों का उपयोग करें:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • या, आप certain बंद टैग को पूरी तरह से छोड़ सकते हैं (सभी ब्राउज़र इस के साथ ठीक हैं):

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>
    

अब जब मैं गया हूं और तीसरे स्थान पर, व्हाइटस्पेस को हटाने के लिए एक हजार अलग-अलग तरीकों से आपको मौत के लिए ऊब गया है, उम्मीद है कि आप font-size: 0 बारे में सब भूल गए हैं font-size: 0

वैकल्पिक रूप से, अब आप कई लेआउट प्राप्त करने के लिए फ्लेक्सबॉक्स का उपयोग कर सकते हैं जिन्हें आपने पहले इनलाइन-ब्लॉक का उपयोग किया हो: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


ठीक है, हालांकि मैंने font-size: 0; दोनों को ऊपर उठाया है font-size: 0; और not implemented CSS3 feature उत्तरों को not implemented CSS3 feature बाद, मुझे पता चला कि उनमें से कोई भी वास्तविक समाधान नहीं है

असल में, मजबूत साइड इफेक्ट्स के बिना भी एक कामकाज नहीं है।

फिर मैंने अपने HTML स्रोत ( JSP ) से inline-block divs के बीच रिक्त स्थान को हटाने का निर्णय लिया (यह उत्तर इस तर्क के बारे में है), इसे चालू करना:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

इसके लिए

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

वह बदसूरत है, लेकिन काम कर रहा है।

लेकिन, एक मिनट प्रतीक्षा करें ... क्या होगा यदि मैं Taglibs loops ( JSTL , JSTL , आदि ...) के अंदर अपने divs उत्पन्न कर रहा हूँ?

उदाहरण के लिए:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

यह पूरी तरह से उन सभी चीजों को रेखांकित करने के लिए सोचने योग्य नहीं है, इसका मतलब होगा

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

यह पठनीय नहीं है, समझना और समझना मुश्किल है, आदि ...

समाधान मैंने पाया:

अगले एक की शुरुआत में एक div के अंत को जोड़ने के लिए एचटीएमएल टिप्पणियों का उपयोग करें!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

इस तरह आपके पास एक पठनीय और सही ढंग से इंडेंट कोड होगा।

और, सकारात्मक दुष्प्रभाव के रूप में, HTML source , हालांकि खाली टिप्पणियों से प्रभावित, परिणामस्वरूप सही ढंग से इंडेंट किया जाएगा;

आइए पहला उदाहरण लें, यह इहोहो:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

इससे बेहतर है

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

उम्मीद है की वो मदद करदे...


पुराने ब्राउज़र के लिए फ्लेक्सबॉक्स का उपयोग करें और फॉलबैक (ऊपर दिए गए सुझावों से) करें:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

प्रत्येक प्रश्न, जो inline-block एस के बीच की जगह को हटाने का प्रयास करता है, मुझे <table> जैसा लगता है ...

इस तरह कुछ कोशिश करें:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


मुझे अभी यह समस्या थी और font-size:0; मैंने पाया है कि इंटरनेट एक्सप्लोरर 7 में समस्या बनी हुई है क्योंकि इंटरनेट एक्सप्लोरर सोचता है "फ़ॉन्ट आकार 0?!?! डब्ल्यूटीएफ क्या आप पागल आदमी हैं?" - तो, ​​मेरे मामले में मेरे पास एरिक मेयर का सीएसएस रीसेट है और font-size:0.01em; मेरे पास इंटरनेट एक्सप्लोरर 7 से फ़ायरफ़ॉक्स 9 तक 1 पिक्सेल का अंतर है, इसलिए, मुझे लगता है कि यह एक समाधान हो सकता है।


मुझे एक शुद्ध सीएसएस समाधान मिला जो मेरे लिए सभी ब्राउज़रों में बहुत अच्छा काम करता था:

span {
    display: table-cell;
}

मुझे लगता है कि इसके लिए एक बहुत ही सरल / पुरानी विधि है जो सभी ब्राउज़रों द्वारा आईई 6/7 तक समर्थित है। हम आसानी से letter-spacing में बड़े नकारात्मक मूल्य पर letter-spacing सेट कर सकते हैं और फिर इसे बाल तत्वों पर normal पर सेट कर सकते हैं:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>


मैं उपयोगकर्ता 560 9 8 9 के उत्तर पर थोड़ा विस्तार करने जा रहा हूं क्योंकि मेरा मानना ​​है कि यहां अन्य समाधान बहुत जटिल / बहुत अधिक काम हैं। margin-right: -4px लागू करना margin-right: -4px इनलाइन ब्लॉक तत्वों के लिए margin-right: -4px अंतर को हटा देगा और सभी ब्राउज़रों द्वारा समर्थित होगा। here अद्यतन पहेली देखें। नकारात्मक मार्जिन का उपयोग करने से संबंधित लोगों के लिए, this पढ़ने का प्रयास this


मैंने एक फ्री कोड कैंप प्रोजेक्ट के लिए रिएक्ट एंड Sass में इसी तरह की समस्या के font-size: 0 समाधान की कोशिश की, मैं वर्तमान में काम कर रहा हूं।

और यह काम करता है!

सबसे पहले, लिपि:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

फिर, सास:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

मैंने पाया एक और तरीका पंक्ति के पहले तत्व को छोड़कर मार्जिन-बाएं नकारात्मक मानों के रूप में लागू कर रहा है।

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

सरल:

item {
  display: inline-block;
  margin-right: -0.25em;
}

मूल तत्व को छूने की कोई आवश्यकता नहीं है।

केवल यहां शर्त: आइटम का फ़ॉन्ट-आकार परिभाषित नहीं किया जाना चाहिए (माता-पिता के फ़ॉन्ट-आकार के बराबर होना चाहिए)।

0.25em डिफ़ॉल्ट word-spacing

डब्ल्यू 3 स्कूल्स - शब्द-दूरी संपत्ति


सीएसएस में एक आसान समाधान है। उदाहरण के लिए:

एचटीएमएल

<p class="parent">
    <span class="children"> Foo </span>
    <span class="children"> Bar </span>
</p>

सीएसएस

.parent {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
}
.children {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
}

मेरी राय में font-size: 0 लिखना font-size: 0 जब आप इसे किसी प्रोजेक्ट में उपयोग करते हैं तो सुरक्षित नहीं है, इसलिए मैं purecss 'समाधान पसंद करता हूं।

आप इस लिंक purecss में इस ढांचे की जांच कर सकते हैं। आनंद लें :)

.row {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;

    /* For better view */
    background: #f9f9f9;
    padding: 1em .5em;
}

.col {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;

    /* For better view */
    padding: 16px;
    background: #dbdbdb;
    border: 3px #bdbdbd solid;
    box-sizing: border-box;
    width: 25%;
}
<div class="row">

    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>

</div>


सीएसएस टेक्स्ट मॉड्यूल लेवल 3 के आधार पर दो और विकल्प ( white-space-collapsing:discard बजाए white-space-collapsing:discard जिसे स्पेक ड्राफ्ट से हटा दिया गया था):

  • word-spacing: -100%;

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

  • word-spacing: -1ch;

यह अंक '0' की चौड़ाई से अंतर-शब्द रिक्त स्थान को छोटा करता है। एक मोनोस्पेस फ़ॉन्ट में यह अंतरिक्ष चरित्र की चौड़ाई (और किसी अन्य चरित्र के साथ) के बराबर होना चाहिए। यह फ़ायरफ़ॉक्स 10+, क्रोम 27+ में काम करता है, और लगभग इंटरनेट एक्सप्लोरर 9 + में काम करता है।

Fiddle


सीएसएस टेक्स्ट मॉड्यूल लेवल 4 विनिर्देश एक text-space-collapse संपत्ति को परिभाषित करता है , जो किसी तत्व के अंदर और उसके आस-पास की सफेद जगह को नियंत्रित करने की अनुमति देता है।

तो, आपके उदाहरण के बारे में, आपको बस इसे लिखना होगा:

p {
  text-space-collapse: discard;
}

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


display:inline-block लिए सभी अंतरिक्ष उन्मूलन तकनीक display:inline-block बुरा हैक्स ...

Flexbox प्रयोग करें

यह कमाल है, इन सभी इनलाइन-ब्लॉक लेआउट बीएस को हल करता है, और 2017 के रूप में 98% ब्राउज़र समर्थन है (अधिक यदि आपको पुराने आईई की परवाह नहीं है)।


white-space: nowrap जोड़ें white-space: nowrap कंटेनर तत्व के लिए white-space: nowrap :

सीएसएस:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Plunker यहाँ है।





css