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

Question

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

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

Comments

यह वास्तव में बहुत बुरा है यह अभी भी सीएसएस कल्पना में शामिल नहीं है। list-style-imageअगर यह तैनात नहीं किया जा सकता है तो क्या बिंदु है ? ऐसा लगता है कि इसके परिणामस्वरूप अधिकांश लोग वर्कअराउंड का उपयोग कर रहे हैं जैसे कि ::beforeऔर background-imageइसके बजाय।

— मेंटलिस्ट

Answer 1

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

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

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

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

Comments

यह सूची सूची को सामान्य सूची वस्तुओं की तुलना में दाईं ओर थोड़ा आगे रख देगा, जो कि नीचे सामान्य होने पर थोड़ा "बंद" है। मैं स्वतंत्र समाधान नहीं जानता, लेकिन आपकी छवि की चौड़ाई के आधार पर, यह बेहतर होगा कि: "मार्जिन: 0 0 0 -7px;"

— ई-मोटिव

शीर्ष स्थिति के लिए, topशीर्ष पैडिंग के बजाय मेरे लिए बदलते मूल्य ने काम किया। background: url(images/bullet.gif) no-repeat left 8px;

— श्रीधर कटकम

यह एक वास्तविक शर्म की बात है कि आप सीधे सूची-शैली को स्टाइल नहीं कर सकते। यह लोगों को सभी प्रकार के वर्कअराउंड का उपयोग करता है। मैं वास्तव में किसी ऐसी चीज़ के लिए सूची-शैली का उपयोग करना पसंद करूँगा जो वास्तव में एक सूची-शैली है, लेकिन मैं इसे उस तरह से नहीं देख सकता जैसा मैं चाहता हूँ।

— एमसीवी

Answer 2

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

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" वह है जो तत्व के अंदर पृष्ठभूमि छवि को संरेखित करता है और पैडिंग के सापेक्ष भी है।

Answer 3

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

    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');
    }

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

Comments

मेरी राय में यह सबसे अच्छा समाधान है। यदि आप छद्म तत्व से पहले बाईं ओर :: तैरते हैं, तो आप उसी प्रभाव को प्राप्त करते हैं।

— TaylorMac

Answer 4

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

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

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

}

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

Answer 5

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

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

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

Answer 6

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

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

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

Answer 7

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

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/

Comments

अपडेट किया गया संस्करण अतिरिक्त लाइन JSfiddle

— McLeodWebDev 10

Answer 8

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

list-style-position: inside;

Answer 9

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

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

Answer 10

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

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

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

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

उल उल {मार्जिन-लेफ्ट: 15 पीएक्स; }

Answer 11

मैं कुछ इस तरह का उपयोग कर रहा हूं, मेरे लिए बहुत साफ और सरल लगता है:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

उपरोक्त कोड मेरे अधिकांश मामलों में काम करता है।
सटीक समायोजन के लिए आप संशोधित कर सकते हैं vertical-align, जैसे:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

आप निर्धारित कर सकते हैं list-style: noneपर liके बजाय ulअगर आप पसंद करते हैं।

Answer 12

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

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

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

Comments

आपको कभी भी क्रॉस-ब्राउज़र रेंडरिंग से निपटने की ज़रूरत नहीं है, क्या आपको नहीं?

— वोल्कर ई।

Answer 13

फॉन्टव्यू के साथ समाधान

#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;}

Answer 14

डिफ़ॉल्ट बुलेट छवि छिपाएँ और उपयोग करें background-imageजैसे आपके पास बहुत अधिक नियंत्रण है:

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}

<ul>
<li>foo</li>
<li>bar</li>
</ul>

Answer 15

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}