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




browser fonts (3)

मैंने एक सीएसएस-केवल ड्रॉपडाउन मेनू बनाया है आवश्यकताओं को आइटम का एक क्षैतिज पट्टी रखना था जो प्रत्येक एक ऊर्ध्वाधर मेनू ड्रॉप कर सकते हैं। इसके अलावा, उन वस्तुओं को एक तृतीयक मेनू नहीं छोड़ना चाहिए, बल्कि इसके बजाय सिर्फ बुलेटेड सूचियां दिखाएं। मेरे एचटीएमएल में तीन नेस्टेड 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 किसी कारण के लिए जादू की दूरी है ...


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


आपके कोड को देखते हुए आपने अपना 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;
}

और वहां यह है।


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

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

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

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





html-rendering