HTML तत्वों के बीच केवल CSS का उपयोग करके स्थान जोड़ें

Question

मेरे पास एक ही HTML तत्व एक के बाद एक हैं:

<span>1</span>
<span>2</span>
<span>3</span>

मैं केवल अंतरिक्ष का उपयोग कर तत्वों को जोड़ने का सबसे अच्छा तरीका सीएसएस का उपयोग कर रहा हूँ

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

इसके अतिरिक्त:

• कृपया अपनी प्राप्तियों की ब्राउज़र संगतता लिखें

---

अपडेट करें

ऐसा लगता है कि मैं अस्पष्ट था। मैं किसी भी ADDITIONAL HTML MARKUP का उपयोग नहीं करना चाहता

<span></span>  <span></span>  <span class="last_span"></span>

मैं तालिकाओं का उपयोग नहीं करना चाहता

मैं चाहता हूं कि सीएसएस द्वारा पहले और आखिरी स्पैन को स्वचालित रूप से लक्षित किया जाए

मैं जावास्क्रिप्ट का उपयोग नहीं करना चाहता

वैकल्पिक आवश्यकता: अंतिम अवधि माता-पिता के टैग की अंतिम सीमा नहीं हो सकती है, लेकिन यह मूल टैग का सबसे लंबा स्पैन होगा। स्पेन्स के बीच कोई अन्य टैग नहीं है।

Comments

शायद आपको एक तालिका का उपयोग करने पर विचार करना चाहिए। इस बात पर निर्भर करता है कि किस डेटा में जाता हैtext

— मदार का भूत

spanएस चर की संख्या है ?

— १५:५४

@ अंतिम सहारा तालिकाओं होना चाहिए।

— टिम जॉयस

spanतत्वों वेब सेवा मैं करने के लिए पहुँच नहीं है द्वारा उत्पन्न कर रहे हैं। इसलिए मैं मार्कअप नहीं बदल सकता। हालांकि, मैं

— Dan

इस तरह के सवालों के साथ, आपको हमेशा उस ब्राउज़र समर्थन को निर्दिष्ट करना चाहिए जिसकी आपको आवश्यकता है। "मुझे IE7 समर्थन चाहिए" पूरी तरह से अलग जवाब मिलेगा "मैं केवल क्रोम का उपयोग कर रहा हूं"।

— तीस

Answer 1

यह करने का एक अच्छा तरीका यह है:

span + span {
    margin-left: 10px;
}

हर एक spanपहले सेspan (इसलिए, हर spanको छोड़कर) पहले होगाmargin-left: 10px ।

यहां एक समान प्रश्न का अधिक विस्तृत उत्तर दिया गया है: हैक के बिना तत्वों के बीच विभाजक

Comments

यह एक अच्छा समाधान है, हालांकि यदि आपका कंटेनर कई लाइनों में फैल जाएगा तो यह विफल हो जाएगा।

— सावास वेदोवा

यह वर्गों के साथ भी काम करता है, जैसे:.sidebar-img + .sidebar-text { margin-left: 40px; }

— पार्सकर

जब आइटम अगली पंक्ति में लपेटते हैं तो आप कैसे संभालते हैं?

— 30

@thdoan: यह आपके लेआउट आदि पर निर्भर करता है। आप कुछ इस तरह की कोशिश कर सकते हैं ।

— २०:५० पर तीस

मैं ग्रिड और ग्रिड-गैप का उपयोग करते हुए Reddtoric के समाधान को प्राथमिकता देता हूं।

— एलेक्स सालोमन

Answer 2

बस मार्जिन या पैडिंग का उपयोग करें।

अपने विशिष्ट मामले में, आप margin:0 10pxकेवल 2 पर ही उपयोग कर सकते हैं <span>।

अपडेट करें

यहाँ एक अच्छा CSS3 समाधान ( jsFiddle ) है:

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

चयनकर्ताओं का उपयोग कर उन्नत तत्व चयन की तरह :nth-child(), :last-child, :first-of-type, आदि इंटरनेट एक्सप्लोरर 9 के बाद से समर्थित है।

Comments

आपके पास एक शानदार उत्तर है, सिमोन, लेकिन क्या आप अंतिम spanरूप से मैन्युअल रूप से निर्दिष्ट किए बिना प्रश्न को हल कर सकते हैं ? यह सीएसएस की नौकरी होनी चाहिए

— दान

यह एक अनएक्ड हैक है, इसके लिए "वर्ड-स्पेसिंग" प्रॉपर्टी है: w3schools.com/cssref/pr_text_word-spacing.asp बेन के जवाब की जांच करें

— arieljuod

ओपी स्पैन के बीच जगह चाहता था, इसलिए इनलाइन तत्वों के लिए एक समाधान देना ठीक है, मार्जिन / पैडिंग / पहले / अंतिम गुणों की यहां आवश्यकता नहीं है और केवल जटिलता जोड़ता है

— एरिलजुओड

वास्तव में, ओपी ने कहा कि वह spanएस और divएस (जो ब्लॉक तत्व हैं) का उपयोग करेंगे । यदि आप divइनलाइन तत्वों के रूप में परिभाषित करते हैं तो आपका समाधान वैसे भी मान्य है ...

— Simone

Answer 3

इन नियमों को मूल कंटेनर में जोड़ें:

display: grid
grid-auto-flow: column
grid-column-gap: 10px

अच्छा संदर्भ: https://cssreference.io/

ब्राउज़र संगतता: https://gridbyexample.com/browsers/

Comments

grid-auto-columns="max-content"उपयोगी भी हो सकता है। यह ग्रिड आइटम के आकार की सामग्री से मेल खाएगा। इसके अलावा, ब्राउज़र संगतता अब कोई मुद्दा नहीं होनी चाहिए: caniuse.com/#feat=css-grid

— एलेक्स सॉलोमन

यह स्वीकृत उत्तर होना चाहिए। मुझे पता है कि टिप्पणियां धन्यवाद के लिए नहीं हैं, मैं अब तक केवल 'फ्लेक्स' डिस्प्ले का उपयोग कर रहा था, और यह 'ग्रिड' चीज़ यह सब माता-पिता के कंटेनर से इतना आसान बना देती है! इसे पूरी तरह से बेकार नहीं छोड़ने के लिए, निम्नलिखित संदर्भ जोड़ देगा जो किसी को भी अधिक जानने के लिए देखने में मदद करता है: css-tricks.com/snippets/css/complete-guide-grid

— रोहन कुमार

Answer 4

यह इतना आसान है।

आप पहले कोड को छोड़कर, एक कोड की एक पंक्ति में तत्वों को स्टाइल कर सकते हैं:

span ~ span {
padding-left: 10px;
}

और किया है, कोई वर्ग हेरफेर नहीं है।

Comments

यह एक परफेक्ट काम करता है। स्पैन + स्पैन काम नहीं किया, लेकिन स्पैन ~ स्पैन एक आकर्षण की तरह काम करता है! धन्यवाद

— juliusmh

मेरे मामले में, मेरे पास कई स्पैन हैं, जिनमें से कुछ में "दिखावा" वर्ग शामिल नहीं हो सकता है, इसलिए मुझे span.Showing ~ span.Showingइसके बजाय क्या चाहिए span.Showing + span.Showing। ~सामान्य भाई-बहन का चयनकर्ता है, जहाँ किसी को सीधे दूसरे का अनुसरण करने की आवश्यकता नहीं है।

— एरिक

Answer 5

आप इस तथ्य का लाभ उठा सकते हैं कि spanएक इनलाइन तत्व है

span{
     word-spacing:10px;
}

हालाँकि, यह समाधान टूट जाएगा यदि आपके पास अपने स्पैन में पाठ के एक से अधिक शब्द हैं

Answer 6

span:not(:last-child) {
    margin-right: 10px;
}

Answer 7

आप इस तरह लिख सकते हैं:

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}

Answer 8

<span>इनलाइन तत्व है, इसलिए आप इसे ब्लॉक स्तर बनाए बिना उन पर रिक्ति नहीं बना सकते। इसे इस्तेमाल करे

क्षैतिज

span{
    margin-right: 10px;
    float: left;
}

खड़ा

span{
    margin-bottom: 10px;
}

सभी ब्राउज़रों के साथ संगत।

Answer 9

आपको अपने तत्वों को एक कंटेनर के अंदर लपेटना चाहिए, फिर सीएसएस ग्रिड जैसी नई CSS3 सुविधाओं का उपयोग करें , नि: शुल्क पाठ्यक्रम , और फिर उपयोग करें grid-gap:valueजो आपकी समस्या के लिए बनाया गया था

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add space between elements, only works on grid items*/
}
.inColumn{
  display:grid;
  grid-template-rows:repeat(auto-fill,auto);
  grid-gap:15px;
}

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

Comments

मैं सीएसएस शैली का उपयोग कर एक div वर्ग के तत्वों के बीच स्थान जोड़ना चाह रहा था। उसके लिए अपना कोड बनाने के लिए मैंने आपके उदाहरण का उपयोग किया। एक जादू की तरह काम किया। धन्यवाद!

— एलियास एस्टैटॉस्टीयू यू

Answer 10

या, मार्जिन सेट करने और इसे ओवरराइड करने के बजाय, आप इसे ठीक से निम्नलिखित कॉम्बो के साथ ठीक से सेट कर सकते हैं:

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}

Comments

अच्छा जवाब, प्रतिबंध ब्राउज़र :first-of-typeऔर :last-of-typeसीएसएस चयनकर्ताओं का समर्थन है ।

— डैन

... notअभिव्यक्ति ब्राउज़र समर्थन के लिए भी जांच करें

— दान

@ यह वास्तव में बहुत अच्छा है, सभी पिछले कई वर्षों के ब्राउज़रों को कवर किया गया है। लेकिन मुझे स्वीकार करना चाहिए, कि yzoja का समाधान और भी स्मार्ट है :)

— jalooc

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

— मीर

Answer 11

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

Answer 12

यदि आप विभिन्न मदों को संरेखित करना चाहते हैं और आपको सभी पक्षों के आसपास समान मार्जिन पसंद है, तो आप निम्नलिखित का उपयोग कर सकते हैं। प्रत्येक तत्व container, प्रकार की परवाह किए बिना, समान आसपास के मार्जिन को प्राप्त करेगा।

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

यदि आप एक पंक्ति में आइटम संरेखित करना चाहते हैं, लेकिन पहले तत्व को सबसे बाईं ओर स्पर्श करें container, और अन्य सभी तत्वों को समान रूप से स्थान दिया जाए, तो आप इसका उपयोग कर सकते हैं:

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह कोड इस और क्यों या कैसे का उत्तर देता है, इस संबंध में अतिरिक्त संदर्भ प्रदान करता है।

— at.βοιτ.βε