समान रूप से एक दूसरे के बगल में तत्वों को समान रूप से कैसे वितरित करें?

Question

यह एक मेनू के लिए है।
उदाहरण के लिए मेरे पास 3 स्पैन के साथ एक दिव्य तत्व है, जिनमें से सभी में कुछ मार्जिन, अधिकतम-चौड़ाई और फ्लोट (बाएं या दाएं) हैं।
यह बाईं ओर से शुरू किया गया है और इस तरह से चलता है:
[[span1][span2][span3] - lots of free space here].
मैं इसे इस तरह से भी बाहर करना चाहता हूं : मैं
[[span1] - space - [span2] - space - [span3]]
सीएसएस का उपयोग कैसे कर सकता हूं? मुझे संदेह है कि यह संभव नहीं है।
ध्यान दें कि मैं चाहता हूं कि जब मैं मेनू आइटम जोड़ता या हटाता हूं तो उसी शैली को रखना चाहिए।
HTML:

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

सीएसएस:

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

Comments

<span>तत्व को ब्लॉक नहीं करना चाहिए, यह widthसंपत्ति को स्वीकार नहीं करना चाहिए

— Marek Sebera

क्या आप वास्तविक कोड प्रदान कर सकते हैं?

— १०:४६ में ब्लेज़मॉन्गर

Answer 1

'पुराने दिनों' में आप एक तालिका का उपयोग करेंगे और आपके मेनू आइटम को समान रूप से स्थान दिए बिना ही आइटम की संख्या के लिए चौड़ाई स्पष्ट रूप से बताएंगे।

यदि यह IE 6 और 7 के लिए नहीं था (यदि यह चिंता का विषय है) तो आप CSS में भी ऐसा कर सकते हैं।

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

सीएसएस:

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

मदों की संख्या के लिए समायोजित किए बिना।

उदाहरण के बिना table-layout:fixed- कोशिकाओं को पूरी चौड़ाई में समान रूप से वितरित किया जाता है, लेकिन उनकी सामग्री द्वारा उनकी चौड़ाई निर्धारित किए जाने के बाद से वे समान आकार के आवश्यक नहीं हैं।

• http://jsfiddle.net/w3dx/ULQwf/

उदाहरण के साथ table-layout:fixed- कोशिकाएं समान आकार की होती हैं, उनकी सामग्री की परवाह किए बिना। (इस परिवर्धन के लिए टिप्पणियों में @DavidHerse का धन्यवाद।)

• http://jsfiddle.net/kqHWM/

यदि आप चाहते हैं कि पहला और अंतिम मेनू तत्व बाएँ और दाएँ उचित हों, तो आप निम्नलिखित CSS जोड़ सकते हैं:

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

Comments

इस पद्धति के साथ, कोशिकाओं को समान रूप से वितरित नहीं किया जाता है। Jsfiddle.net/hcrzx देखें । मध्य कोशिका अन्य दो कोशिकाओं की तुलना में लंबी होती है।

— सुसम पाल

@ सुसम: सच है, कोशिकाओं को समान आकार की आवश्यकता नहीं है , क्योंकि सेल की चौड़ाई इसकी सामग्री (एक HTML तालिका के साथ ही) द्वारा निर्धारित की जाती है। हालाँकि, मैं अभी भी कहूंगा कि उन्हें समान रूप से वितरित के रूप में वर्णित किया जा सकता है , क्योंकि उनकी सामग्री के आधार पर मूल तत्व की पूरी चौड़ाई में उन्हें समान रूप से वितरित किया जाता है (आवश्यक रूप से समान रूप से नहीं)। यदि आप उनकी सामग्री की परवाह किए बिना समान आकार की कोशिकाएँ चाहते हैं, तो मैं चाहता हूँ कि आपको एक स्क्रिप्टेड समाधान की आवश्यकता हो।

— MrWhite

Answer 2

आप औचित्य का उपयोग कर सकते हैं।

यह अन्य उत्तरों के समान है, सिवाय इसके कि बाएँ और दाएँ तत्व समान दूरी पर होने के बजाय किनारों पर होंगे - [a ... b ... c के बजाय .a..b..c]।

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

एक गोटा यह है कि आपको प्रत्येक तत्व के बीच में रिक्त स्थान छोड़ना चाहिए। [फिडल देखें।]

इनलाइन-ब्लॉक में मेनू आइटम सेट करने के दो कारण हैं:

1. यदि तत्व डिफ़ॉल्ट रूप से एक ब्लॉक स्तर आइटम (जैसे <li>) है तो डिस्प्ले को एक ही लाइन में रहने के लिए इनलाइन या इनलाइन-ब्लॉक पर सेट किया जाना चाहिए।
2. यदि तत्व में एक से अधिक शब्द ( <span>click here</span>) हैं, तो प्रत्येक शब्द समान रूप से इनलाइन पर सेट होने पर वितरित किया जाएगा, लेकिन इनलाइन-ब्लॉक में सेट होने पर केवल तत्व वितरित किए जाएंगे।

JSFiddle देखें

संपादित करें:
अब जब फ्लेक्सबॉक्स का व्यापक समर्थन है (सभी गैर-आईई, और आईई 10+), तो "बेहतर तरीका" है।
उपरोक्त समान संरचना को मानते हुए, आप सभी की आवश्यकता है:

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

यदि आप चाहते हैं कि बाहरी तत्व भी फैल जाएँ, तो बस स्पेस-बीच को स्पेस-अराउंड में स्विच करें।
JSFiddle देखें

Answer 3

अगर कोई थोड़ा अलग दृष्टिकोण आजमाना चाहता है, तो वे फ्लेक्स का उपयोग कर सकते हैं।

एचटीएमएल

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

सीएसएस

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

ये है फिडेल: http://jsfiddle.net/ynemh3c2/ (डिव को जोड़ने / हटाने का प्रयास करें)

यहाँ पर मैंने यहाँ इस बारे में सीखा है: https://css-tricks.com/snippets/css/a.guide- टू-flexbox /

Answer 4

justify-content: space-betweenऔर display: flexहम सभी की जरूरत है, लेकिन प्रेरणा के लिए @Pratul के लिए धन्यवाद!

Comments

अच्छा जवाब। युक्ति: flex-wrap: wrapसामग्री को चारों ओर लपेटने के लिए उपयोग करें ।

— सुयश गुप्ता

Answer 5

यह इसे करने का त्वरित और आसान तरीका है

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

सीएसएस

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

तब समायोजित widthकी spanसंख्या आप के लिए है।

उदाहरण: http://jsfiddle.net/jasongennaro/wvJxD/

Comments

sooo ... इसके लिए कोई आसान तरीका नहीं है कि आप केवल चौड़ाई समायोजित कर सकें?

— १४:१५ बजे जर्किक्स

width: 33%;जितना करीब आप पा सकते हैं, लेकिन यह माता-पिता के कंटेनर से दूर है, न कि बाल तत्वों की संख्या। यदि आप चाहते हैं कि यह बच्चे (स्पैन) के तत्वों के आधार पर समायोजित हो, तो आपको संभवतः जावास्क्रिप्ट के साथ खेलना होगा।

— शौना

सही @ शुना। @jurchiks, आप widths की संख्या के आधार पर s की गणना कर सकते हैं, spanलेकिन इसके लिए कुछ js की आवश्यकता होगी। यदि आपका मेनू बार-बार नहीं बदल रहा है, तो समायोजन को widthसमस्या नहीं होनी चाहिए।

— जेसन जेनारो

@ josh.trow। यह मेरे लिए पूरे दिन धीमा रहा।

— जेसन गेनारो

@ जेसन - पहले से ही किया (PHP को छोड़कर), जेएस को अच्छी तरह से नहीं जानता, शायद कोई मुझे यह कैसे करना सिखा सकता है।)। ठीक लगता है, लेकिन मार्जिन एक समस्या बन जाता है।

— 15

Answer 6

आपको बस #menuइस तरह से फ्लेक्स कंटेनर के रूप में आईडी के साथ डिव प्रदर्शित करना होगा:

#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}

Answer 7

मैं निम्नलिखित सीएसएस संयोजन के साथ ऐसा करने में कामयाब रहा:

text-align: justify;
text-align-last: justify;
text-justify: inter-word;

Answer 8

.container {
  padding: 10px;
}
.parent {
  width: 100%;
  background: #7b7b7b;
  display: flex;
  justify-content: space-between;
  height: 4px;
}
.child {
  color: #fff;
  background: green;
  padding: 10px 10px;
  border-radius: 50%;
  position: relative;
  top: -8px;
}

<div class="container">
  <div class="parent">
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
    <span class="child"></span>
  </div>
</div>

Answer 9

सभी इनलाइन-इन-ब्लॉक तत्वों का उपयोग करें। मेनू आइटम वाले स्पैन की सूची के नीचे 100% चौड़ाई के साथ एक खाली खिंचाव स्पैन बनाएं। अगला स्पैन टेक्स्ट-संरेखित करें: उचित है। यह तब इनलाइन-ब्लॉक तत्वों [आपके मेनू आइटम] को समान रूप से वितरित करने के लिए मजबूर करेगा।

https://jsfiddle.net/freedawirl/bh0eadzz/3/

  <div id="container">

          <div class="social">
            <a href="#" target="_blank" aria-label="facebook-link">
            <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="twitter-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="youtube-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="pinterest-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="snapchat-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="blog-link">
                 <img src="http://placehold.it/40x40">
            </a>

            <a href="#" aria-label="phone-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <span class="stretch"></span>
          </div>
             </div>