<Ul> तत्वों के लिए कस्टम बुलेट प्रतीक <ul> जो कि एक नियमित वर्ण है, और छवि नहीं है

125

मुझे लगता है कि एक सीएसएस विशेषता का उपयोग करके एक कस्टम ग्राफिक को एक प्रतिस्थापन बुलेट चरित्र के रूप में निर्दिष्ट किया जा सकता है:

list-style-image

और फिर उसे एक URL दे।

हालांकि, मेरे मामले में, मैं सिर्फ '+' प्रतीक का उपयोग करना चाहता हूं। मैं उसके लिए एक ग्राफिक बनाना नहीं चाहता और फिर उसे इंगित करना चाहता हूं। मैं बल्कि अनियंत्रित सूची को बुलेट प्रतीक के रूप में एक प्लस प्रतीक का उपयोग करने का निर्देश देता हूं।

क्या यह किया जा सकता है या क्या मैं इसे पहले ग्राफिक बनाने के लिए मजबूर हूं?

— IDStar
स्रोत

81

निम्नलिखित को टैमिंग सूचियों से उद्धृत किया गया है :

ऐसा समय हो सकता है जब आपके पास एक सूची होगी, लेकिन आप कोई बुलेट नहीं चाहते हैं, या आप बुलेट के स्थान पर किसी अन्य वर्ण का उपयोग करना चाहते हैं। फिर से, सीएसएस एक सीधा समाधान प्रदान करता है। बस सूची-शैली जोड़ें: कोई नहीं; अपने नियम के लिए और LIs को हैंगिंग इंडेंट के साथ प्रदर्शित करने के लिए मजबूर करें। नियम कुछ इस तरह दिखेगा:
ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}
या तो पैडिंग या मार्जिन को शून्य पर सेट करने की आवश्यकता है, अन्य एक सेट 1em के साथ। आपके द्वारा चुनी गई "बुलेट" के आधार पर, आपको इस मूल्य को संशोधित करने की आवश्यकता हो सकती है। नकारात्मक पाठ-इंडेंट के कारण पहली पंक्ति को उस राशि से बाईं ओर ले जाया जाता है, जिससे एक लटकता हुआ इंडेंट बनता है।

HTML में हमारा मानक UL होगा, लेकिन सूची आइटम की सामग्री से पहले बुलेट के स्थान पर आप जो भी चरित्र या HTML इकाई का उपयोग करना चाहते हैं। हमारे मामले में हम », सही डबल एंगल उद्धरण का उपयोग कर रहे हैं:»।

»आइटम 1
» आइटम 2
»आइटम 3
» आइटम 4
»आइटम 5 हम
थोड़ा लंबा कर देंगे ताकि
यह लपेटा जा सके

— टीजे वेल्थएंगइन एपीआई इवेंजलिस्ट
स्रोत

1

आपके समाधान ने काम किया, के संयोजन में: छद्म चयनकर्ता से पहले कि आप और @ टिसन टी। दोनों को इंगित करते हैं। मुझे यह पसंद आया कि आपने कॉल किया कि कैसे <UL> पर विभिन्न विशेषताओं ने संगीत कार्यक्रम में गोली मारने की कोशिश की।

— idStar

9

इस तरह से मैंने इसे एक साथ रखा, जिसने काम किया: उल {फ़ॉन्ट-आकार: 14 पीएक्स; लाइन-ऊँचाई: 16 पीएक्स; सूची-शैली: कोई नहीं; मार्जिन-वाम: 0; पैडिंग-लेफ्ट: 1em; पाठ-इंडेंट: -1em; } ली: {सामग्री से पहले: "+"; } मुझे + सिंबल के बाद स्पेस देना था, लेकिन यह काफी अच्छी तरह से संरेखित है।

— idStar

6

दुर्भाग्य से इस पद्धति के साथ बुलेट साइन उन चयनों में शामिल हो जाता है जो सामान्य गोलियों के लिए नहीं है।

— कोनराड हॉफनर

169

यह एक देर से जवाब है, लेकिन मैं अभी इस पर आया हूं ... लपेटने वाली किसी भी रेखा पर इंडेंटिंग सही करने के लिए, इसे इस तरह आज़माएं:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

— माइक टी
स्रोत

1

मेरे लिए, यह माप की इकाई के रूप में ch का उपयोग करने के लिए बेहतर काम करता है, विशेष रूप से text-indent: -2ch+ संकेत और इसके बाद के स्थान के लिए खाते में करने के लिए, फिर padding-right: 1chउस स्थान को जोड़ने के लिए। फिर भी, एक बड़ा +1।

— 15

44

इतने सारे उपाय।
लेकिन मुझे अभी भी लगता है कि सुधार की गुंजाइश है।

लाभ:

बहुत कॉम्पैक्ट कोड
किसी भी फ़ॉन्ट आकार के साथ काम करता है
(कोई पूर्ण पिक्सेल मान शामिल नहीं)
पूरी तरह से पंक्तियों को संरेखित करता है
(पहली पंक्ति और निम्न पंक्तियों के बीच कोई मामूली बदलाव नहीं)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}

<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

स्निपेट का विस्तार करें

— Jpsy
स्रोत

2

यह बहुत अच्छा है

— user3168511

1

यह मेरी राय में एक बेहतर जवाब है क्योंकि यह बताता है कि आप अन्य विवरणों को कैसे अनुकूलित कर सकते हैं। और इसमें "रन कोड स्निपेट" भी जुड़ा हुआ है!

— आयनू सयुता

1

यह उत्तर होना चाहिए। साफ-सुथरा और सरल

— EvilDr

1

मैं एक छवि का उपयोग कर समाधान ढूंढ रहा था और बहुत सारे उत्तर देने की कोशिश की, लेकिन इसने मेरे लिए सबसे अच्छा काम किया! मैं content: url('link-to-my-asset.svg');बुलेट और सामग्री के बीच छवि की चौड़ाई और पैडिंग का उपयोग और सेट करने में सक्षम था । धन्यवाद!

— एनीपी

यह एक अच्छा जवाब है। हालांकि, मुझे एक समाधान की आवश्यकता थी जो कॉलम-काउंट का भी समर्थन कर सके

— कुशाग्र अरोड़ा

29

यह W3C समाधान है। फ़ायरफ़ॉक्स और क्रोम में काम करता है।

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

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }

  <ul><li>item</li></ul>

स्निपेट का विस्तार करें

— PHPst
स्रोत

2

हालांकि यह लगता है फ़ायरफ़ॉक्स के वर्तमान संस्करण में काम करने के लिए, परिणाम बेहद बदसूरत है: कस्टम बुलेट सही पाठ सामग्री (यह करने के लिए तड़क) के सामने रखा गया है, लगभग के रूप में यदि li:before {content:"…";}किसी अन्य खरोज और संरेखण के बिना इस्तेमाल किया गया था।

— एंटोन सैमसोनोव

19

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

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

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

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

— NicolasBernier
स्रोत

यह आसानी से मुझे मिला सबसे अच्छा समाधान है।

— चार्ल्स रॉपर

floatफिर से उपयोग ? ... ah नमः।

10

:beforeसूची आइटम के सामने सामग्री डालने के लिए आप छद्म चयनकर्ता का उपयोग कर सकते हैं । आप Quirksmode पर एक उदाहरण पा सकते हैं, http://www.quirksmode.org/css/beforeafter.html पर । मैं इस का उपयोग करने के लिए blockquotes आसपास विशाल उद्धरण सम्मिलित करें ...

HTH।

— टायसन टी।
स्रोत

10

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

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

स्निपेट का विस्तार करें

— user648519
स्रोत

8

यह उचित है कि स्टाइल को योग्य बनाया <li>जाए ताकि यह <ol>सूची की वस्तुओं को प्रभावित न करे । इसलिए:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

— silverliebt
स्रोत

8

फ़ॉन्ट-कमाल बॉक्स से एक महान समाधान प्रदान करता है:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

स्निपेट का विस्तार करें

— SDW
स्रोत

4

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}

<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

स्निपेट का विस्तार करें

— बॉब
स्रोत

अप ने सिर्फ इस वजह से मतदान किया / * कॉपी करें और HTML से ब्राउज़र में एक बुलेट को css में पेस्ट करें (ascii कोड का उपयोग नहीं करते) * /

— kheya

2

उन्हें डैश शैली:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

— dmartinezfernandez
स्रोत

1

मैं नकारात्मक मार्जिन का उपयोग करना पसंद करता हूं, आपको अधिक नियंत्रण देता है

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

— जॉन मैगनोलिया
स्रोत

1

दिलचस्प रूप से पर्याप्त नहीं है कि मैं किसी भी पोस्ट किए गए समाधान के लिए पर्याप्त नहीं हूं, क्योंकि वे इस तथ्य पर भरोसा करते हैं कि उपयोग किया गया चरित्र 1em चौड़ा है, जिसे ऐसा करने की आवश्यकता नहीं है (शायद जॉन मैगनोलिया के उत्तर के अपवाद के साथ जो हालांकि फ्लोट का उपयोग करता है जो कर सकते हैं चीजों को दूसरे तरीके से उलझा देना)। यहाँ मेरा प्रयास है:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

स्निपेट का विस्तार करें

इसके ये फायदे हैं (अन्य समाधानों पर):

यह प्रतीक की चौड़ाई पर निर्भर नहीं करता है जैसा कि आप उदाहरण में देखते हैं। मैंने दो पात्रों का उपयोग यह दिखाने के लिए किया कि यह व्यापक गोलियों के साथ भी काम करता है। यदि आप इसे अन्य समाधानों में आज़माते हैं तो आपको पाठ गलत लगता है (वास्तव में यह उच्च ज़ोम्स में * प्रतीक के साथ भी दिखाई देता है)।
यह आपको गोलियों द्वारा उपयोग किए जाने वाले स्थान का कुल नियंत्रण प्रदान करता है । आप 30px को किसी भी चीज़ (यहां तक कि 1em आदि) से बदल सकते हैं। बस इसे तीनों स्थानों पर बदलना न भूलें।
यदि आप गोली की स्थिति का कुल नियंत्रण देता है । बस text-align: center;कुछ भी अपनी पसंद के हिसाब से बदलें । उदाहरण के लिए आप कोशिश कर सकते हैं color: red; text-align: right; padding-right: 5px; box-sizing: border-box; या यदि आप बॉर्डर-बॉक्स के साथ खेलना पसंद नहीं करते हैं, तो बस पेडिंग (5px) को चौड़ाई (यानी चौड़ाई: 25px इस उदाहरण में) से घटाएं। बहुत सारे विकल्प हैं।
यह फ्लोट्स का उपयोग नहीं करता है इसलिए इसे कहीं भी समाहित किया जा सकता है।

का आनंद लें।

— Gorn
स्रोत

1

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}

<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>

स्निपेट का विस्तार करें

— विराज गिरि
स्रोत

धन्यवाद - यह बहुत साफ है और मैं इस बारे में भूल गया !important, जो ब्लॉगस्पॉट में मेरे कस्टम सीएसएस को काम करने के लिए महत्वपूर्ण था

— 21

-2

इसे इस्तेमाल करे

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>

स्निपेट का विस्तार करें

— वेंकट
स्रोत