दिलचस्प पोस्ट
फोनगैप / कॉर्डोवा एंड्रॉइड डेवलपमेंट एंड्रॉइड: आशय के माध्यम से एक विशिष्ट फ़ोल्डर कैसे खोलें और फ़ाइल ब्राउज़र में इसकी सामग्री दिखाएं? प्रमाणीकरण के साथ wget Win32 पर जीसीसी के साथ असेंबली के प्रतीकों को अग्रसर करना जोड़ रहा है? जावा में टाइम ज़ोन का उपयोग करके डेलाइट बचत को कैसे निपटें डिफ़ॉल्ट सेकंड से अधिक समय के लिए स्प्लैश स्क्रीन प्रदर्शित करना JComponent (एस) से XxxSize को JLabel में कैसे जोड़ा जाता है सूची बनाम बाइनरी ट्री छोड़ें एकाधिक अक्षर पायथन के साथ बदलते हैं Jquery का उपयोग करके आप एक पृष्ठभूमि रंग में / बाहर कैसे फीका कर सकते हैं? Django ORM में select_related और prefetch_related में क्या अंतर है? ब्फार्ड पढ़ने के साथ एमडी 5 (या अन्य) हैश की गणना करने के लिए संभव है? NUnit Visual Studio 2010 कोड नहीं चल रहा है क्या पुनर्प्राप्ति विधि को 'रिक्त' वापस करना चाहिए या अपवाद फेंकता है, जब वह वापसी मूल्य का उत्पादन नहीं कर सकता है? स्टैनफोर्ड पार्सर और एनएलटीके

सूची शैली छवि स्थिति समायोजित करें?

सूची-स्टाइल-छवि की स्थिति को समायोजित करने का कोई तरीका है?

जब मैं सूची आइटम के लिए पैडिंग का उपयोग करता हूं तो छवि उसकी स्थिति पर रहेगी और पैडिंग के साथ नहीं चलेगी …

वेब के समाधान से एकत्रित समाधान "सूची शैली छवि स्थिति समायोजित करें?"

ज़रुरी नहीं। आपका पैडिंग (शायद) सूची आइटम पर लागू किया जा रहा है, इसलिए यह केवल सूची आइटम के भीतर वास्तविक सामग्री को प्रभावित करेगा।

पृष्ठभूमि और पैडिंग शैलियों के संयोजन का उपयोग करना कुछ ऐसा बना सकता है जो समान दिखता है

li { background: url(images/bullet.gif) no-repeat left top; padding: 3px 0px 3px 10px; /* reset styles (optional): */ list-style: none; margin: 0; } 

आप अपने बुलेटेड सूची आइटमों को स्थान देने के लिए मूल सूची कंटेनर (उल) में स्टाइल जोड़ना चाह रहे हैं, यह एक सूची के अलावा लेख का एक अच्छा प्रारंभिक संदर्भ है।

मैं सामान्य रूप से सूची-शैली-प्रकार को छिपाने और पृष्ठभूमि छवि का उपयोग करता हूं, जो चलने योग्य है

 li { background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent; list-style-type: none; margin: 0; padding: 0px 0px 1px 24px; vertical-align: middle; } 

"7px 7px" तत्व के अंदर पृष्ठभूमि छवि को संरेखित करता है और यह भी पैडिंग के सापेक्ष है।

इस प्रश्न का एक संभावित समाधान जो अभी तक उल्लेख नहीं किया गया है वह निम्नलिखित है:

  li { position: relative; list-style-type: none; } li:before { content: ""; position: absolute; top: 8px; left: -16px; width: 8px; height: 8px; background-image: url('your-bullet.png'); } 

अब आप ली के ऊपर / बायां उपयोग कर सकते हैं: नए बुलेट की स्थिति में आने से पहले। ध्यान दें कि ली की चौड़ाई और ऊंचाई: आपके द्वारा चुनी गई पृष्ठभूमि की छवि के समान आयाम होने से पहले। यह इंटरनेट एक्सप्लोरर 8 और ऊपर में काम करता है

मुझे एक ही समस्या थी, लेकिन मैं पृष्ठभूमि विकल्प (और कई पृष्ठभूमि का उपयोग नहीं करना चाहता) का उपयोग नहीं कर सका इसलिए मैंने एक और समाधान के बारे में सोचा

यह एक मेनू के लिए एक उदाहरण है जिसमें सक्रिय / वर्तमान मेनू आइटम के लिए एक सूचक जैसा वर्ग है (डिफ़ॉल्ट सूची शैली किसी अन्य नियम में कोई भी नहीं है)

 nav ul li.active>a:before{ content: "■"; position: absolute; top: -22px; left: 55px; font-size: 33px; } 

यह एक वर्ग चरित्र का प्रयोग करके ": पहले" छद्म वर्ग के साथ वर्ग बना देता है और यह पूर्ण स्थिति का उपयोग करके स्वतंत्र रूप से स्थितिबद्ध है।

यह है कि मैंने बाईं तरफ छोटे ग्रे ब्लॉकों को पाने के लिए और बढ़ती पंक्तिशोथ के साथ पाठ के केंद्र में क्या किया है:

 line-height:200%; padding-left:13px; background-image:url('images/greyblock.gif'); background-repeat:no-repeat; background-position:left center; 

उम्मीद है कि यह किसी को मदद करता है: डी

अंत में इसके लिए मैंने जिस हल का निपटारा किया था वह कुछ अंतर जोड़ने के लिए छवि को स्वयं संशोधित करना था।

ली पर पृष्ठभूमि छवि का उपयोग करना, जैसा कि कुछ सुझाव बहुत सारे मामलों में काम करता है, लेकिन जब एक प्रारंभिक छवि के साथ सूची का उपयोग किया जाता है (उदाहरण के लिए छवि को चारों ओर लपेटने के लिए पाठ प्राप्त करने के लिए)।

उम्मीद है की यह मदद करेगा।

या आप उपयोग कर सकते हैं

 list-style-position: inside; 

एक अन्य विकल्प आप कर सकते हैं, निम्नलिखित है:

 li:before{ content:''; padding: 0 0 0 25px; background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px; } 

सूची छवि को स्थानांतरित करने के लिए (0 3px) का उपयोग करें

IE8 +, क्रोम, फ़ायरफ़ॉक्स, और ओपेरा में काम करता है।

मैं इस विकल्प का उपयोग करता हूं क्योंकि आप आसानी से सूची-शैली को स्वैप कर सकते हैं और एक अच्छा मौका भी आपको एक छवि का उपयोग बिल्कुल भी नहीं करना पड़ सकता है। (बेला नीचे)

http://jsfiddle.net/flashminddesign/cYAzV/1/

अद्यतन करें:

यह दूसरी पंक्ति में जाने वाली पाठ / सामग्री के लिए खाता होगा:

 ul{ list-style-type:none; } li{ position:relative; } ul li:before{ content:'>'; padding:0 10px 0 0; position:absolute; top:0; left:-10px; } 

पैडिंग-बाएं: जोड़ें अगर आप बुलेट और सामग्री के बीच अधिक स्थान चाहते हैं तो लीजिये।

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

मुझे लगता है कि आप वास्तव में क्या करना चाहते हैं, पेडिंग जोड़ते हैं (आप वर्तमान में <li>) <ul> टैग में जोड़ रहे हैं और फिर बुलेट अंक <li> के पाठ से आगे बढ़ेंगे I

सूची-शैली-स्थिति भी है जो आप देख सकते हैं यह प्रभावित करता है कि कैसे गोलियां छवियों के आसपास रेखाएं लपेटता है

जैसे "एक डेरेन" उत्तर लेकिन मामूली संशोधन

 li { background: url("images/bullet.gif") left center no-repeat; padding-left: 14px; margin-left: 24px; } 

यह क्रॉस ब्राउज़र काम करता है, बस पैडिंग और मार्जिन समायोजित करें

नेस्टेड के लिए संपादित करें: उप-नेस्टेड सूची में हाशिए-बाएं जोड़ने के लिए इस शैली को जोड़ें

उल उल {मार्जिन-बायां: 15px; }

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

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

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

fontawesome के साथ समाधान

 #polyNedir ul li { position:relative;padding-left:20px } #polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}