मैं सूची आइटम के बीच ऊर्ध्वाधर स्थान कैसे सेट करूं?

115

एक <ul>तत्व के भीतर , स्पष्ट रूप से लाइनों के बीच ऊर्ध्वाधर रिक्ति को लाइन-ऊंचाई विशेषता के साथ स्वरूपित किया जा सकता है।

मेरा सवाल है, एक <ul>तत्व के भीतर , मैं सूची वस्तुओं के बीच ऊर्ध्वाधर रिक्ति कैसे सेट करूं?

html css html-lists

— Brice Coustillas
स्रोत

1

ul li { margin: ???; padding: ???; line-height: ???; }सभी या उन सीएसएस विशेषताओं में से कुछ।

— ब्रैड क्रिस्टी

112

आप मार्जिन का उपयोग कर सकते हैं। उदाहरण देखें:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

विशेष रूप से, liतत्वों पर मार्जिन का उपयोग करें तत्व नहीं ul।

— डुआनेव

41

एचटीएमएल

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

सीएसएस

li:not(:last-child) {
    margin-bottom: 5px;
}

संपादित करें: यदि आप अंतिम ली तत्व के लिए विशेष मामले का उपयोग नहीं करते हैं, तो आपकी सूची में बाद में एक छोटी रिक्ति होगी, जिसे आप यहाँ देख सकते हैं: http://jsfiddle.net/wQYw7/

अब मेरे समाधान के साथ तुलना करें: http://jsfiddle.net/wQYw7/1/

यकीन है कि यह पुराने ब्राउज़रों में काम नहीं करता है, लेकिन आप आसानी से जेएस एक्सटेंशन का उपयोग कर सकते हैं जो पुराने ब्राउज़रों के लिए इसे सक्षम करेगा।

1

@ वेब डेवलपर्स / कोडर्स के रूप में हमारी नौकरी का हिस्सा समाधान प्रदान करना है जो यथासंभव अधिक से अधिक वातावरण में काम करेगा। पूछे गए प्रश्न के लिए आपका उत्तर वास्तव में ओवरकिल है।

— disinfor

1

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

जिस वातावरण के साथ वह काम कर रहा है वह वेब ब्राउज़र है। यह एक समाधान का सुझाव देने के लिए ओवरकिल नहीं है जो हर जगह काम करता है। इसके अलावा, यदि आप वास्तव में अंतिम आइटम मार्जिन के बारे में चिंतित हैं, तो आप एक समाधान का सुझाव नहीं देंगे जिसे ठीक करने के लिए js की आवश्यकता होगी। आप इस्तेमाल कर सकते हैं :first-childऔर यह सब कुछ में काम करेगा IE7 +

— disinfor

4

@disinfor मैं हर चीज को लक्षित करने से असहमत हूं। वेब डेवलपमेंट के तनाव का एक हिस्सा उन ब्राउज़रों को सपोर्ट करने से आता है जो हमारा समर्थन नहीं करते हैं। सफारी उनमें से एक है। हमें उन ब्राउज़रों के लिए खड़े होने की आवश्यकता है जो इंटरनेट, माध्यम . com / @richtr /… को रोकते हैं । हमारे वेब पेजों को "हमें आपके ब्राउज़र का समर्थन नहीं करना चाहिए" नोटिस को हर जगह काम करने के लिए नरक से गुजरना नहीं चाहिए। और हमें ग्राहकों को भी सूचित करना होगा। या हम कुछ नहीं कर सकते हैं और भयानक मंजिल मैट हो सकते हैं।

— 1.21 गीगावाट

@ 1.21gigawatts "हमारे वेब पेजों को" हमें आपके ब्राउज़र का समर्थन नहीं करना चाहिए "" mhm, no। इसे प्रतियोगिता का तोड़फोड़ कहा जाता है, और कई देशों में यह अवैध है। Microsoft ने वेब के लिए Skype के साथ ऐसा किया। वेब के लिए Skype अभी भी अन्य ब्राउज़रों में पूरी तरह से काम करता है। Google ने सफारी में एक साल से अधिक समय तक Youtube की खराबी की। Google टोर उपयोगकर्ताओं को कुछ सेवाओं का उपयोग करने से रोकता है। एप्लिकेशन और सेवाओं को प्लेटफ़ॉर्म-स्वतंत्र बनाने के लिए "वेब प्लेटफ़ॉर्म" की बात नहीं है, जैसा कि विशिष्ट प्लेटफ़ॉर्म को ब्लॉक करने में नहीं है? यदि आप ऐसा करना चाहते हैं, तो इसके बजाय मूल कार्यक्रम क्यों नहीं बनाएं? अंत में, वे अधिक शक्तिशाली हैं।

— एंड्रियास

35

मैं इस पर झुका रहूँगा जिसमें IE8 समर्थन का गुण है।

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

— Paulie_D
स्रोत

27

marginअपने liटैग में जोड़ें । इससे liऔर आप टैग के line-heightभीतर पाठ में रिक्ति सेट करने के लिए उपयोग कर सकते हैं li।

— disinfor
स्रोत

3

कई बार HTML ईमेल ब्लास्ट करते समय आप स्टाइल शीट या स्टाइल / स्टाइल ब्लॉक का उपयोग नहीं कर सकते हैं। सभी सीएसएस को इनलाइन होना चाहिए। उस स्थिति में जहां आप गोलियों के बीच अंतर को समायोजित करना चाहते हैं, मैं ली शैली का उपयोग करता हूं = "मार्जिन-बॉटम: 8 पीएक्स"; प्रत्येक बुलेट आइटम में। अपनी पसंद के हिसाब से पिक्सल वैल्यू को कस्टमाइज करें।

— मैल्कम स्टोन
स्रोत

इसके अलावा, शैली / शैली प्रकार के टैग हटाए गए हैं

— बेन स्लैड

2

पूरी सूची पर लागू करने के लिए, का उपयोग करें

ul.space_list li { margin-bottom: 1em; }

फिर, html में:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

— टॉम बार्टनस्टीन
स्रोत

0

छद्म वर्ग का उपयोग कर प्रत्येक सूची के लिए पैडिंग-बॉटम सेट करना एक व्यवहार्य विधि है। इसके अलावा लाइन ऊंचाई का उपयोग किया जा सकता है। याद रखें कि फ़ॉन्ट गुण जैसे कि फ़ॉन्ट-परिवार, फ़ॉन्ट-वजन, आदि असमान ऊंचाइयों के लिए एक भूमिका निभाता है।

— ऋषि जंग
स्रोत

2

क्या आप अपने समाधान का एक उदाहरण प्रदान कर सकते हैं?

— मुलदेक

-9

<br><li></li>लाइन प्रविष्टियों के बीच सभी वेब ब्राउज़रों में पूरी तरह से अच्छी तरह से काम करने लगता है जो मैंने कोशिश की है, लेकिन यह ऑन-लाइन W3C CSS3 चेकर को पारित करने में विफल रहता है। यह मुझे ठीक वैसी ही रेखा देता है जैसा मैं बाद में हूं। जहां तक मेरा सवाल है, चूंकि यह निस्संदेह काम करता है, इसलिए मैं इसे इस्तेमाल करने में लगा रहा हूं, जो भी डब्ल्यू 3 सी कहता है, जब तक कि कोई व्यक्ति एक अच्छा कानूनी विकल्प नहीं ला सकता।

— मेल्विन ओवेन
स्रोत

यदि आप वर्तमान लाइन की ऊँचाई से खुश हैं, तो आपका सुझाव ठीक काम करता है, लेकिन मुझे लगता है कि वह अपनी खुद की जगह निर्दिष्ट करना चाहता है। लाइन ब्रेक का उपयोग करके वर्तमान लाइन ऊंचाई का उपयोग करके नई लाइनें बनाएं।

— 1.21 गीगावाट

यदि आप कई मदों के साथ सूची में पुनरावृति करते हैं, तो ब्र को जोड़ना एक भयानक अभ्यास है। मार्कअप अंतरिक्ष को जोड़ने का सबसे सुरक्षित और सुरशोट तरीका है जैसा कि उपरोक्त उत्तरों ने सुझाया है।

— SeaWarrior404