सीएसएस इनलाइन-ब्लॉक तत्वों को कंटेनर की पूरी चौड़ाई फैलाता है

Question

ठीक है तो यह वास्तव में थोड़ा जटिल है।

मेरे पास एक नेविगेशन सूची है जहां सूची आइटम inline-block पर सेट हैं। आइटम की संख्या डायनामिक है, इसलिए भिन्न हो सकती है।

मेरा उद्देश्य सूची आइटम कंटेनर की पूरी चौड़ाई फैलाना है। (उदाहरण के लिए यदि 4 सूची आइटम थे तो प्रत्येक कंटेनर चौड़ाई का 25% ले जाएगा [मार्जिन/पैडिंग इत्यादि को अनदेखा कर रहा है]

अतिरिक्त जटिलता है कि ब्राउज़र इनलाइन-ब्लॉक तत्वों में 4px मार्जिन जोड़ते हैं उनके बीच सफेद जगह है (लाइनब्रेक/अंतरिक्ष आदि)।

मैंने शुरुआती बिंदु के रूप में एक पहेली बना दी है जिसमें 2 उदाहरण हैं: पहला केवल इनलाइन-ब्लॉक मोड में सूची आइटम है जो दूसरा चौड़ाई में उन्हें औचित्य देता है।

न तो जो कुछ भी मैं चाहता हूं वह प्राप्त करता है जो पूरी चौड़ाई के लिए तत्वों द्वारा किसी अन्य पंक्ति पर तोड़ने के लिए लिया जाता है।

http://jsfiddle.net/4K4cU/2/

संपादित: थोड़ा अलग लेकिन क्यों मेरे 2 उदाहरण में वहाँ नीचे li एक जगह नहीं है, तथ्य यह है मैं 0 करने के लिए line-height और font-size निर्धारित किया है के बावजूद?

Answer 1

अब यह 2016 है और मैं एक जवाब flexbox उपयोग करने के साथ इस सवाल का अद्यतन करने के लिए चाहता था। ब्राउज़र-compatiblity के लिए CanIUse के साथ परामर्श करें।

कुछ बहुत नंगे हड्डियों मार्कअप:

<ul> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
    <li>text</li> 
</ul> 

सीएसएस:

ul { 
    display: flex; 
    width: 100%; 
} 
li { 
    flex: 1 1 100% 
} 

और एक fiddle/साथ खेलने के लिए कार्य करते हुए देखते हैं।

Answer 2

इसमें कई फ़िक्स हैं। जिसे मैं पसंद करता हूं वह केवल तत्वों के बीच सफेद जगह को हटाने के लिए है, क्योंकि फ़ॉन्ट-आकार की चाल में गैर-अर्थात् सीएसएस शामिल है। और यह बहुत आसान हैहा। कोड क्योंकि जवाब यह आवश्यकता है:

<ul class="list"> 
    <li> 
     text 
    </li><li> 
     text 
    </li><li> 
     text 
    </li><li> 
     text 
    </li> 
</ul> 

Updated jsFiddle है, जिसकी पहली सूची width:25%; करने के लिए सेट आइटम हैं और यह एक पंक्ति में विंडो में फिट बैठता है। यदि यह वह नहीं है जिसके लिए आप जा रहे थे, तो मुझे गलत समझा जाना चाहिए।

संपादित करें: सूची आइटम

की अज्ञात संख्या के लिए इस के लिए कुछ CSS3 के सामान है, लेकिन पार ब्राउज़र संगत वापस IE8 करने के लिए हो सकता है, यदि आप एक जे एस समाधान चाहते हैं। कुछ इस तरह काम करना चाहिए:

var listItems = document.querySelectorAll('li'); 
listItems.style.width = listItems.parentNode.style.width/listItems.length; 

दूसरा संपादित करें: jQuery के बजाय जे एस

के लिए यह Winging, लेकिन:

var $listitems = $('.list').children(); 
$listitems.width($listitems.parent().width()/$listitems.length); 

Answer 3

यहाँ अपने मूल अवधारणा को संशोधित करने का एक तरीका है।

सीएसएस है:

.list { 
    padding:0; 
    margin:0; 
    list-style-type:0; 
    overflow: hidden; 
    height: 42px; 
} 
.list li { 
    display: inline-block; 
    line-height: 40px; 
    padding: 0 5px; 
    border:1px green solid; 
    margin:0; 
    text-align:center; 
} 

अपने माता पिता के कंटेनर, .list पर, बच्चे तत्वों संलग्न करने की ऊंचाई निर्धारित किया है। इस मामले में, मैंने 40px चुना और सीमा के लिए 2px जोड़ा।

इसके अलावा, छद्म-तत्व द्वारा उत्पन्न दूसरी पंक्ति को छिपाने के लिए .list पर overflow: hidden सेट करें।

li तत्वों पर, line-height: 40px पर सेट करें जो पाठ को लंबवत रूप से केंद्रित करेगा।

चूंकि ऊंचाई तय की गई है, दूसरी पंक्ति छिपी हुई है और आप अपने माता-पिता को सीमा के साथ शैलीबद्ध कर सकते हैं और बिना अतिरिक्त सफेद स्पेस को तोड़ने के बिना।

डेमो: http://jsfiddle.net/audetwebdesign/WaRZT/

आसान नहीं ...

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

समान रूप से सीमा बक्से

आप सीमा बक्से समान रूप से वितरित किया जाना चाहते हैं, तो आप li तत्वों के लिए एक चौड़ाई सेट करना होगा।

सामग्री एक सीएमएस से आता है, और आप कोडिंग पर कुछ नियंत्रण है, तो आप गतिशील रूप से उदाहरण के लिए, पूर्वनिर्धारित सीएसएस नियमों का उपयोग सही चौड़ाई सेट करने के लिए एक वर्ग के नाम उत्पन्न कर सकते हैं:

.row-of-4 .list li { width: 24%; } 
.row-of-5 .list li { width: 19%; } 
.row-of-6 .list li { width: 16%; } 

देखें: http://jsfiddle.net/audetwebdesign/WaRZT/3/

Answer 4

आप डिस्प्ले का उपयोग कर सकते हैं: ली तत्व के साथ इनलाइन-ब्लॉक, और टेक्स्ट-एलाइन का उपयोग करें: उल तत्व के साथ औचित्य दें। यदि आप रुचि रखते हैं, तो कृपया here पर क्लिक करें।

Answer 5

ठीक है, कई सभ्य उत्तरों और मेरी आंतरिक सोच के बावजूद कि जेएस/jquery वास्तव में एक अच्छा सीएसएस-केवल समाधान है: तालिका कक्ष का उपयोग कर। Pumbaa80

.list { 
 
    margin:0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width:100%; 
 
} 
 
.list>li { 
 
    display: table-cell; 
 
    border:1px green solid; 
 
    padding:5px; 
 
    text-align: center; 
 
} 
 
.container { 
 
    border: 1px #777 solid; 
 
}

<div class="container"> 
 
    <ul class="list"> 
 
     <li>text</li> 
 
     <li>text</li> 
 
     <li>some longer text</li> 
 
     <li>text</li> 
 
    </ul> 
 
</div>

इस रूप में अन्य समाधान से बेहतर है @ द्वारा मूल सुझाव:

• सीएसएस-केवल
• इनलाइन ब्लॉक के साथ के रूप में कोई 4px मार्जिन समस्या
• फ्लोट किए गए तत्वों के लिए कोई स्पष्टता आवश्यकता नहीं है
• समान रूप से li सामग्री
• संक्षिप्त सीएसएस

फिडल यहाँ की चौड़ाई स्वतंत्र वितरित बनाए रखता है: http://jsfiddle.net/rQhfC/