css क्या एक बुलेटेड सूची आइटम हमेशा बिल्कुल 1.8em इंडेंट किया जाता है?




browser fonts (4)

आपके कोड को देखते हुए आपने अपना ul सेट किया है कि उसके पास कोई मार्जिन या पैडिंग नहीं है हालांकि, आपने अपने li की इस तरह की स्थापना की है कि उनके पास margin-left: 1.8em :

#nav li ul li ul li {
    display: list-item;
    margin-left:1.8em;
    list-style:disc outside none;
}

#nav li ul li ul li {
    margin-left: 1.8em;
    padding-left: 0;
}

और वहां यह है।

मैंने एक सीएसएस-केवल ड्रॉपडाउन मेनू बनाया है आवश्यकताओं को आइटम का एक क्षैतिज पट्टी रखना था जो प्रत्येक एक ऊर्ध्वाधर मेनू ड्रॉप कर सकते हैं। इसके अलावा, उन वस्तुओं को एक तृतीयक मेनू नहीं छोड़ना चाहिए, बल्कि इसके बजाय सिर्फ बुलेटेड सूचियां दिखाएं। मेरे एचटीएमएल में तीन नेस्टेड ul और मेनू पूरी तरह से सभी आधुनिक ब्राउज़रों में काम कर रहा है। यह इस तरह दिख रहा है:

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

#nav li ul li ul li a {
    padding-left:1.8em;
    margin-left:-1.8em;
}

अब बुलेटेड मेनू आइटम दिखता है जैसे मैं चाहता था:

और फ़ॉन्ट आकार के मुताबिक em मधुमक्खी की प्रकृति के कारण, यह फ़ॉन्ट आकार से स्वतंत्र रूप से काम करता है, जैसे कि यहां बड़े फ़ॉन्ट आकार के साथ दिखाया गया है:

मैंने इसे इंटरनेट एक्सप्लोरर 8 + 9 + 10 (डेवलपर पूर्वावलोकन), फ़ायरफ़ॉक्स 3 + 7, नवीनतम क्रोम, ओपेरा और सफारी पर परीक्षण किया और यह एक जादू की तरह काम करता है

हालांकि, मैं समझ नहीं पा रहा हूं कि यह वास्तव में 1.8 एम् है जो काम करता है। कैसे हर ब्राउज़र bullet वस्तुओं को वास्तव में इस दूर? मैंने इस विषय पर इंटरनेट खोज की, लेकिन मुझे कुछ उपयोगी नहीं मिला। क्या मुझे यकीन है कि यह भविष्य के ब्राउज़रों पर काम करता है? क्या उन 1.8em को HTML मानक में निर्दिष्ट किया गया है?

किसी भी संकेत के लिए अग्रिम धन्यवाद!

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

असंतुष्ट गोट के जवाब के लिए: अगर मैं 1em / -1em या 20px / -20px का इस्तेमाल करता हूं तो यह काम नहीं करेगा इस शैली के साथ:

#nav li ul li ul li a {
    padding-left:20px;
    margin-left:-20px;
}

मुझे ये (स्पष्ट रूप से फ़ॉन्ट आकार के साथ नहीं स्केलिंग) परिणाम भिन्न फ़ॉन्ट आकारों के लिए मिलता है:

इसी तरह, 1em / -1em भी बंद है और उपरोक्त तस्वीर में दाईं तरफ दिखता है, लेकिन फ़ॉन्ट आकार के साथ स्केलिंग। यह अभी भी दिखता है कि 1.8em किसी कारण के लिए जादू की दूरी है ...


असंगत ब्राउज़रों के कई सालों के आधार पर - मैं कह सकता हूं कि आप उन पर भरोसा नहीं कर सकते हैं ताकि आप लगातार सुसंगत रहें। सबसे अच्छा विकल्प जबरन अपने आप को नियंत्रित करना है

आप इसका उपयोग एक साथ लीड की पैडिंग-बाएं और मार्जिन-बाएं को एक साथ सेट कर सकते हैं उदाहरण के लिए:

li {
  margin-left: 1.8em;
  padding-left: 0;      
}

जाहिरा तौर पर कुछ (मुख्यतः पुराने) ब्राउज़र पैडिंग और कुछ मार्जिन का उपयोग करते हैं - इसलिए दोनों को सेट करना सुनिश्चित करें।


प्रश्न और आपकी टिप्पणी का जवाब देने के लिए: आपका समाधान काम करता है क्योंकि आप पैडिंग को उसी आकार के मार्जिन के साथ नकार देते हैं लेकिन सूची के बायीं तरफ अंतर बड़ा फ़ॉन्ट आकार के साथ बड़ा है आपको एक ही परिणाम 1em पैडिंग और -1 एमएफ़ मार्जिन या 20px और -20px के साथ मिलेगा।

जैसा कि मैंने टिप्पणी में बताया है, सूचियों के लिए वास्तविक डिफ़ॉल्ट पैडिंग 40px है। उपयोगकर्ता एजेंट स्टाइलशीट (क्रोम देव टूल और फ़ायरबॉग के लिए फ़ायरबॉग्ज) की जाँच करने पर चीजों को और भी भ्रमित करने के लिए, वे क्रमशः अद्वितीय सीएसएस गुणों की रिपोर्ट करते हैं: -webkit-padding-start या -moz-padding-start क्रमशः

मुझे लगता है कि इन विशेष गुणों को नियमित रूप से गद्दी के स्थान पर उपयोग किया जाता है, क्योंकि सूचियों को HTML में विशेष मामला है - वे गोलियों / संख्याओं को फांसी देते हैं जो पैडिंग में नहीं गिनाते हैं।


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





html-rendering