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

Question

यह एक मेनू के लिए है।
उदाहरण के लिए मैं इसे में 3 फैला है, जो सभी कुछ मार्जिन, अधिकतम-चौड़ाई और नाव (बाएं या दाएं) के साथ एक div तत्व है।
यह बाईं ओर से शुरू कर तैनात किया जाता है और इस प्रकार है:
[[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; 
} 

Answer 1

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

<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; 
} 

फिरसमायोजित करने के लिए है संख्या आप के लिए span के ६०६८९१३२१०।

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

Answer 2

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

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

<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 के बिना उदाहरण - कोशिकाओं को पूरी चौड़ाई में समान रूप से वितरित किया जाता है, लेकिन वे समान रूप से समान आकार के नहीं होते हैं क्योंकि उनकी चौड़ाई उनकी सामग्री द्वारा निर्धारित होती है।

• table-layout:fixed साथ http://jsfiddle.net/w3dx/ULQwf/

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

• http://jsfiddle.net/kqHWM/

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

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

Answer 3

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

यह अन्य उत्तरों के समान है, सिवाय इसके कि बाएं और दाएं तत्व समान दूरी के बजाए किनारों पर होंगे - [ए ... बी ... सी के बजाय .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>) हैं, तो प्रत्येक शब्द को समान रूप से जब इनलाइन करने के लिए सेट वितरित किया जाएगा, लेकिन जब इनलाइन-ब्लॉक करने के लिए सेट केवल तत्वों वितरित किया जाएगा।

See the JSFiddle

संपादित करें:
अब flexbox व्यापक समर्थन (सभी गैर IE, और IE 10+) है, वहाँ एक "बेहतर तरीका है।"
के रूप में ऊपर एक ही तत्व संरचना मान लिया जाये कि, आप सभी की जरूरत है:

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

आप चाहते हैं बाहरी तत्व के रूप में अच्छी तरह से स्थान दिया गया हो, तो सिर्फ अंतरिक्ष के बीच स्विच करने अंतरिक्ष चारों ओर।
See the JSFiddle

Answer 4

यदि कोई थोड़ा अलग दृष्टिकोण आना चाहता है, तो वे FLEX का उपयोग कर सकते हैं। (जोड़ने/divs को दूर करने के साथ-साथ प्रयास करें)

वह स्थान है जहां मैं इस बारे में पता चला http://jsfiddle.net/ynemh3c2/:

एचटीएमएल

<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; 
} 

यहाँ बेला है https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

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

Answer 6

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

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>