एचटीएमएल सूची वस्तुओं को समान रूप से एक अनियमित सूची में वितरित करने के लिए कैसे करें

Question

मैं अपने li तत्व चाहता हूं जो क्षैतिज मेनू को मेरे ul तत्व की चौड़ाई में समान रूप से वितरित करने के लिए तैयार करें। मैं सामान्य रूप से float मेरी li बाईं ओर तत्वों और कुछ मार्जिन जोड़ें। लेकिन यह कैसे ताकि वे सही किनारे करने के लिए अपने ul तत्व के बाईं से विस्तार मैं उचित दूरी रख सकता हूं?

यहाँ ul भर an example jsfiddle of a menu not distributed है।

रिक्ति प्रत्येक li के बीच ही हो गया है। लेकिन li तत्व अलग-अलग लंबाई हो सकते हैं।

Answer 1

फिर भी एक और दृष्टिकोण। यह कुछ ऐसा है जो मैं पृष्ठ पर समान रूप से मेनू को विस्तारित करने का प्रयास करते समय उपयोग करता हूं। यह अच्छा है अगर आपके पास एक गतिशील मेनू है जो कुछ शर्तों के आधार पर बदल जाएगा (जैसे एक व्यवस्थापक पृष्ठ जो केवल तब दिखाता है जब आप व्यवस्थापक के रूप में लॉग इन हैं)।

सीएसएस:

nav div ul { 
display: table; 
width: 100%; 
list-style: none; 
} 
nav div ul li { 
display: table-cell; 
text-align: center; 
} 
nav div ul li a { 
display: block; 
} 

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

संपादित करें:

सीएसएस:

nav div ul li:first-child { 
    text-align: left; 
} 
nav div ul li:last-child { 
    text-align: right; 
} 

आप इसे देखने के लिए यह इस जोड़कर बेहतर तक फैला तरह कर सकते हैं

फिर से, अनचाहे, बस टाइप किया गया।

Answer 2

मैं स्पष्ट रूप से अपने प्रश्न नहीं मिलता है तो मैं मान लिया है कि आप इस चाह सकते हैं:

li { 
    border:solid 1px red; 
    clear:both; 
    display:block; 
    float: left; 
    margin: 5px; 
    width:100%; 
} 
ul { 
    text-align: center; 
    width:300px; 
} 

Answer 3

आप स्थान को भरने के लिए उन्हें मजबूर करने के लिए ली तत्वों की चौड़ाई सेट करना होगा:

ul { 
    width: 100%; 
} 
li { 
    float: left; 
    width: 33%; 
} 

(Fiddle demo)

आप सूची में और आइटम जोड़ने, तो आप प्रतिशत चौड़ाई समायोजित करने की आवश्यकता होगी - चार वस्तुओं के साथ जैसे, चौड़ाई 25% हो जाएगा।

Answer 4

मैं तुम्हारे लिए दो जवाब दिया है।

आप float मॉडल साथ रहना चाहते हैं:

आपका ul तत्व (इस संपत्ति के बिना अतिप्रवाह संपत्ति सेट की जरूरत है, अपने ul (या किसी भी शुरु तत्वों से युक्त) तत्व नहीं ऊंचाई दिया जाता है (यह व्यवहार की उम्मीद है, आपको दिमाग: http://www.quirksmode.org/css/clearing.html) और इसलिए 0 की ऊंचाई तक डिफ़ॉल्ट होगा - इसका प्रभाव यह होगा कि यदि आप अपने ul/li और शरीर के लिए अलग-अलग पृष्ठभूमि रंग सेट करते हैं, तो आपके ul की पृष्ठभूमि दिखाई नहीं देगी प्रदर्शित करने के लिए)।

ul { 
    text-align: center; 
    width: 300px; 
    overflow: auto; 
} 

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

li { 
    float: left; 
    margin: 5px 0 5px 0; 
    width: 100px; 
    text-align: center; 
} 

अपने ली तत्वों (यदि पुराने ब्राउज़रों के लिए समर्थन एक प्राथमिकता नहीं है) के लिए display:inline-block संपत्ति का उपयोग करें। IE 7 इस का समर्थन नहीं करता, तो यह उपयोगी है यदि आप विस्तृत क्रॉस-ब्राउज़र समर्थन की जरूरत है, तो नहीं है, लेकिन यह प्रभाव आप चाहते हैं बनाता है - हालांकि यकीन है कि आप तो अपने </li> और <li> टैग के बीच किसी भी स्थानों को हटा कर, अन्यथा वे में गिना जाएगा समग्र चौड़ाई और तत्वों के बीच रिक्त स्थान के रूप में दिखाई देगा।

एक लाभ यह इस पद्धति है कि आप जानते हैं या कंटेनर ul की चौड़ाई सेट अगर आप अपने निहित li तत्वों पर प्रतिशत चौड़ाई का उपयोग करने की जरूरत नहीं है कि है, तब भी आप पाठ के अनुरूप के साथ मुक्त करने के लिए केंद्रित मिल संपत्ति जो आपके पास पहले से है। यह आपके लेआउट को बहुत ही उत्तरदायी बनाता है।

मार्कअप::

<ul> 
<li>banana</li><li>orange</li><li>apple</li> 
</ul> 

सीएसएस:

li { 
    display:inline-block; 
    margin:5px 0 5px 0; 
    width:33.33%; 
} 
ul { 
    text-align: center; 
} 

• आप बल्कि मार्कअप रखना चाहते हैं, तो

  यहाँ मार्कअप और सीएसएस कि जिस तरह से मुझे लगता है कि आप अनुरोध कर रहे काम करता है कई लाइनों पर, आपको सीएसएस में अपने li तत्वों के बाएं और दाएं मार्जिन के साथ बेवकूफ़ बनाना होगा।

• यदि आप li तत्व जोड़ते हैं, तो आपको मिलान की चौड़ाई को मिलान करना होगा (उदाहरण के लिए, अपने मार्कअप में चार li तत्वों के साथ, आपको प्रत्येक के लिए 25% की चौड़ाई रखने के लिए अपने सीएसएस को बदलना होगा)।