114

मुझे उदाहरण के लिए, सूची-आइटम के लिए बुलेट के रूप में स्टार-प्रतीक (★) का उपयोग करने की आवश्यकता है।

मैंने CSS3 मॉड्यूल को पढ़ा है : सूचियाँ , जो वर्णन करती हैं, कि कस्टम टेक्स्ट को गोलियों के रूप में कैसे उपयोग किया जाए, लेकिन यह मेरे लिए काम नहीं कर रहा है। मुझे लगता है, ब्राउज़र केवल ::markerछद्म तत्व का समर्थन नहीं करते हैं ।

मैं छवियों का उपयोग किए बिना इसे कैसे कर सकता हूं?

html css html-lists

— AntonAL
स्रोत

क्या आप अपने द्वारा उपयोग किए जा रहे कोड को डाल सकते हैं? और आप किस ब्राउज़र में इसका परीक्षण कर रहे हैं?

— जॉनी हेन्स

1

stackoverflow.com/questions/3068199/… में कुछ यूनिकोड बुलेट हैं। हालांकि, आपके पास मेरे ऊपर की ओर न तो स्टार सिंबल है, न ही 26AB (मीडियम ब्लैक सर्कल) डिस्प्ले, हालांकि वे उबंटू पर ओके हैं।

— पीट किरकम

यह उत्तर (एक समान प्रश्न के लिए) ने इसे मेरे लिए हल कर दिया: stackoverflow.com/a/12216973/907575

— पिओत्र मिगडाल

77

संपादित करें

मैं शायद अब छवियों का उपयोग करने की सलाह नहीं दूंगा। मैं इस तरह से एक यूनिकोड वर्ण का उपयोग करने के दृष्टिकोण पर टिकूंगा:

li:before {
  content: "\2605";
}

पुराने ANSWER

मैं शायद एक छवि पृष्ठभूमि के लिए जाऊंगा, वे बहुत अधिक ~~कुशल हैं~~ बहुमुखी और क्रॉस-ब्राउज़र-अनुकूल हैं।

यहाँ एक उदाहरण है:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

— agbb
स्रोत

47

वह “अधिक कुशल” कैसे है? आप छवि लाने के लिए अतिरिक्त HTTP अनुरोध भेज रहे हैं और कुल फ़ाइल बढ़ जाती है क्योंकि आप किसी ऐसी चीज़ के लिए एक छवि लोड करते हैं जो कि केवल एक यूनिकोड वर्ण के उपयोग के माध्यम से की जा सकती है।

— मथियास बिएनेंस

2

आप सही हैं, शायद "कुशल" वह शब्द नहीं है जिसका उपयोग आपको प्रदर्शन के लिए देख रहा हो, लेकिन इसका उपयोग करना चाहिए, लेकिन छवि पृष्ठभूमि का उपयोग करना निश्चित रूप से पाठ का उपयोग करने की तुलना में अधिक बहुमुखी है।

— 13

3

एक छवि का आकार बदलना बहुत अच्छा नहीं है, लेकिन एक चरित्र हर आकार पर सही है, इसलिए मैं कहूंगा कि एक चरित्र अधिक बहुमुखी है: पीआई को लगता है कि बैकग्राउंड-संगत या ब्राउज़र समर्थन की सबसे विस्तृत श्रृंखला शब्द होगा ...

— JustGoscha

जब <li>पाठ लपेटता है तो यह अच्छी तरह से काम नहीं करता है : बुलेट एकतरफा नहीं रहता है, और टेक्स्ट के पैराग्राफ की शुरुआत की तरह समाप्त होता है। यह उत्तर इस समस्या को हल करता है: stackoverflow.com/a/14301918/1450294

— माइकल शेपर

105

बुलेट के रूप में टेक्स्ट का उपयोग करना

li:beforeएक बच हेक्स HTML इकाई (या किसी भी सादे पाठ) के साथ प्रयोग करें ।

उदाहरण

मेरा उदाहरण गोलियों के रूप में चेक के निशान के साथ सूचियों का उत्पादन करेगा।

सीएसएस :

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

ब्राउज़र संगतता

खुद का परीक्षण नहीं किया, लेकिन इसे IE8 के रूप में समर्थित होना चाहिए। कम से कम यह है कि quirksmode और css-tricks कहते हैं।

आप छवियों, या लिपियों जैसे पुराने / धीमे समाधानों को लागू करने के लिए सशर्त टिप्पणियों का उपयोग कर सकते हैं। बेहतर अभी तक, दोनों के साथ उपयोग करें<noscript> छवियों के लिए ।

HTML :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

पृष्ठभूमि छवियों के बारे में

पृष्ठभूमि की छवियां वास्तव में संभालना आसान है, लेकिन ...

ब्राउज़र समर्थन background-sizeवास्तव में केवल IE9 के रूप में है।
HTML पाठ रंग और विशेष ( पागल ) फोंट बहुत कम HTTP अनुरोधों के साथ कर सकते हैं।
एक स्क्रिप्ट समाधान बस HTML इकाई को इंजेक्ट कर सकता है, और उसी सीएसएस को काम करने दें।
एक अच्छा रीसेटिंग सीएसएस कोड list-style(अधिक तार्किक विकल्प) को आसान बना सकता है।

का आनंद लें।

— 222
स्रोत

1

विशेष वर्णों से बचने के लिए उपयोगी रूपांतरण उपकरण rishida.net/tools/conversion

— iiz

23

यह ठीक से काम नहीं करता है यदि liतत्व की सामग्री कई लाइनों पर लपेटती है; उन लिपटी लाइनों को सही ढंग से इंडेंट नहीं किया जाएगा।

— रिचर्ड ईव

5

float: left; margin-left: -12px;on: इससे पहले कि देखभाल करने के लिए, @RichardEverett

— Dudo

1

मैं एक लाइन के लिए काम करता हूं, लेकिन अगर कई लाइनें लपेट रही हैं तो काम नहीं करता।

— Vdarricau

1

केवल एकल-पंक्ति सूची-आइटम के लिए काम करता है। मल्टी-लाइनें इंडेंट करने के बजाय बुलेट के नीचे गिर जाएंगी।

— क्लारस डिग्नस

35

आप इसका निर्माण कर सकते हैं:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

— defann
स्रोत

4

यह एक शानदार तकनीक है क्योंकि यदि आप चरित्र की पूर्ण स्थिति को नहीं करते हैं, तो आप बाकी सूची आइटम के साथ "बुलेट" इनलाइन के साथ समाप्त होते हैं। यह बहुत ही अन-बुलेट जैसा व्यवहार है। तो इस फिक्स के साथ, आपको सूची के बाईं ओर "बुलेट" मिलता है जैसे आप सामान्य बुलेट के साथ करेंगे।

— जनरल रेडनेक

इसके लिए शुक्रिया! वास्तव में मुझे अपनी गोलियों को फिर से व्यवहार करने के लिए क्या चाहिए।

— ट्यूबगाय ५००३५

1

यह एक अद्भुत नेविगेशन ट्री का उपयोग करता है '\21B3'! धन्यवाद! इसने यहां अन्य उत्तरों की तुलना में बेहतर काम किया। padding-leftमेरे डिजाइन में भी बदलाव किया गया है 1em, जो आपके पेड़ के स्तर को बदलने पर अच्छी तरह से पालन करता है।

— ndm13

23

यह W3C समाधान है। आप 3012 में इसका उपयोग कर सकते हैं!

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

— PHPst
स्रोत

12

मैंने सुना है कि 3012 में, इंटरनेट एक्सप्लोरर आखिरकार काम करता है!

— मार्क के कोवान

2

यह फ़ायरफ़ॉक्स 48 में काम करता है, लेकिन क्रोमियम 51 में या मेरे फोन / टैबलेट पर नहीं। पर li:beforeसमाधान का उपयोग करना होगा ।

— कोडरगुइ १२

1

काम करता है। भविष्य, महिलाओं और सज्जनों में आपका स्वागत है।

— मिको ओक्टामा

12

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

यहाँ अब तक का सबसे अच्छा समाधान है। यह बहुत अच्छा काम करता है और यह क्रॉस-ब्राउज़र (IE 8+) है।

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

महत्वपूर्ण बात यह है कि एक निश्चित चौड़ाई के साथ फ्लोटिंग ब्लॉक में चरित्र होना चाहिए ताकि पाठ एक पंक्ति में फिट होने के लिए बहुत लंबा हो जाए। 1.2em वह चौड़ाई है जिसे आप अपने चरित्र के लिए चाहते हैं, इसे अपनी आवश्यकताओं के लिए बदल दें। उल और झूठे तत्वों के लिए पैडिंग और मार्जिन रीसेट करना न भूलें।

संपादित करें: ध्यान रखें कि "1.2em" आकार भिन्न हो सकता है यदि आप उल और ली में एक अलग फ़ॉन्ट का उपयोग करते हैं: पहले। यह पिक्सेल का उपयोग करने के लिए सुरक्षित है।

— NicolasBernier
स्रोत

शायद "ऊंचाई: 1 पीएक्स" या ली के समान: पहले जोड़ें? यह सुनिश्चित करता है कि फ्लोट अगले <li> तक विस्तारित नहीं होता है, जिससे अवांछनीय नेस्टिंग होती है।

— एलन डी स्मेट

प्रदर्शन क्यों: ब्लॉक; ली पर: पहले? क्या यह डिफ़ॉल्ट रूप से इसकी इनलाइन के कारण है और आप एक चौड़ाई निर्दिष्ट नहीं कर सकते हैं?

— अलेक्जेंडर सोलोनिक

6

स्टार जोड़ने के लिए यूनिकोड वर्ण का उपयोग करें 22C6।

मैंने liस्टार और स्टार के बीच थोड़ी दूरी बनाने के लिए एक स्थान जोड़ा । अंतरिक्ष के लिए कोड है A0।

li:before {
    content: '\22C6\A0';
}

— एक प्रकार की कटार
स्रोत

4

222 के उत्तर का एक और पूर्ण उदाहरण :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

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

फ़ायरफ़ॉक्स, क्रोम, सफारी और IE8-10 में परीक्षण किया गया और सभी में सही ढंग से प्रस्तुत किया गया।

— pospi
स्रोत

text-indent: -1em;यदि आपके पास बहु-पंक्ति सूची आइटम हैं, तो एक महत्वपूर्ण गुण है। इसके बिना दूसरी और बाद की लाइनें पिछली लाइन के बजाय बुलेट से चलती हैं।

— एंड्रीस

3

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

— Iacchus
स्रोत

1

मैं इस पूरी सूची के माध्यम से गया हूं और 2020 तक आंशिक रूप से सही और आंशिक रूप से गलत तत्व हैं।

मैंने पाया कि यूटीएफ -8 का उपयोग करते समय इंडेंट और ऑफसेट सबसे बड़ी समस्या थी, इसलिए मैं इसे अपने उदाहरण के रूप में "ईमानदार त्रिकोण" बुलेट का उपयोग करके 2020 के संगत सीएसएस समाधान के रूप में पोस्ट कर रहा हूं।

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

emफ़ॉन्ट आकार के साथ संघर्ष से बचने के लिए इकाई के रूप में उपयोग करें

— Beerswiller
स्रोत

0

इस कोड को आज़माएं ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

— चराफ जेआरए
स्रोत

-1

यह विषय पुराना हो सकता है, लेकिन यहां एक त्वरित समाधान है ul {list-style:outside none square;}या ul {list-style:outside none disc;} , आदि ...

फिर सूची तत्व में बाएं गद्दी जोड़ें

ul li{line-height: 1.4;padding-bottom: 6px;}

— user2415803
स्रोत

सीएसएस में सूची-आइटम के लिए बुलेट के रूप में यूनिकोड चरित्र

बुलेट के रूप में टेक्स्ट का उपयोग करना