HTML सूची-शैली-प्रकार डैश

Question

क्या डैश (यानी - या - –या - —) के साथ HTML में सूची-शैली बनाने का एक तरीका है

<ul>
  <li>abc</li>
</ul>

outputting:

- abc

यह मेरे साथ ऐसा कुछ करने के लिए हुआ है li:before { content: "-" };, हालांकि मुझे उस विकल्प के बारे में पता नहीं है (और प्रतिक्रिया के लिए बहुत बाध्य होगा)।

अधिक सामान्य रूप से, मुझे यह जानकर बुरा नहीं लगेगा कि सूची आइटम के लिए सामान्य वर्णों का उपयोग कैसे करें।

Comments

चूंकि डैश आमतौर पर सूचियों में उपयोग किया जाता है इसलिए इसे सीएसएस में डिफ़ॉल्ट रूप से शामिल नहीं किया गया है?

— तिमिरबेक

इससे भी महत्वपूर्ण बात यह है कि क्यों अंब नंबरिंग और कटकाना है ... लेकिन डैश नहीं?

— हेनरी सी

Answer 1

आप उपयोग कर सकते हैं :beforeऔर content:यह ध्यान में रखते हुए कि यह IE 7 या उससे नीचे समर्थित नहीं है। यदि आप इसके साथ ठीक हैं तो यह आपका सबसे अच्छा समाधान है। पूर्ण विवरण के लिए क्या मैं उपयोग या QuirksMode CSS संगतता तालिकाओं को देख सकता हूं ।

पुराने ब्राउज़रों में काम करने वाला थोड़ा नास्टियर समाधान बुलेट बिंदु के लिए एक छवि का उपयोग करना है और बस छवि को डैश की तरह बनाना है। उदाहरण के लिए W3C list-style-imageपृष्ठ देखें ।

Comments

इसके साथ समस्या :beforeयह है कि जब सूची आइटम कई पंक्तियों तक फैल जाती है, तो दूसरी पंक्ति पर इंडेंट शुरू होता है जहां डैश होता है, इस प्रकार इंडेंटेड सूची प्रभाव को बर्बाद कर देता है। इससे बचने के लिए आपको हैंगिंग इंडेंट्स का इस्तेमाल करना होगा। इसे देखें: alistapart.com/articles/taminglists

— chiborg

contentउपयोग में mdash लगाने के लिएcontent: "\2014\a0"

— इवान जेड

@Three का उत्तर देखें, जो अधिक सामान्य और कम क्रिया है!

— बेन वर्थोघेन

Answer 2

:beforeछद्म वर्ग के साथ इंडेंटेड सूची प्रभाव रखने के लिए एक आसान निर्धारण (पाठ-इंडेंट) है ।

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Comments

काम करता है, लेकिन भूल नहीं है डाल करने के लिए list-style-type: none;करने के लिए <ul>तत्व।

— 10

बिना इंडेंटेशन के बसul li:before{ content:"- ";}

— क्लेमैक्स

मैं इसमें और अधिक आसानी से जोड़ने के display: block; float: left;लिए li:beforeसामग्री प्रवाह से बाहर निकालना पसंद कर सकता हूं , अन्यथा पहले और बाद की लाइनों को सही ढंग से प्राप्त करने के लिए यह बहुत कठिन / छोटी गाड़ी है। या कीयान झांग का जवाब भी यह पूर्ण स्थिति के साथ है।

— साइमन ईस्ट

सुंदर गूंगा जो list-style-type dashपहले से ही CSS का हिस्सा नहीं है

— Pixelomo

आपके द्वारा प्रस्तावित के समान HTML- केवल समाधान क्या होगा?

— प्लूटन

Answer 3

यहां किसी भी स्थिति के सापेक्ष या निरपेक्ष और पाठ-इंडेंट के बिना एक संस्करण है:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

का आनंद लें ;)

Comments

महान! मैं 'ul.dash> li: से पहले' का सुझाव दूंगा। अन्यथा भीतर के ओले गड़बड़ हो जाते हैं।

— w.stoettinger

मैं जोड़ने के लिए पसंद करते हैं display: block; float: left;करने के लिए li:beforeजो और अधिक आसानी से यह सामग्री प्रवाह से बाहर खींच सकते हैं, नहीं तो यह बहुत कठिन / बग्गी पहले और बाद में लाइनों को सही ढंग से पंक्तिबद्ध करने के लिए प्राप्त करने के लिए है। या कीन झांग का जवाब भी पूर्ण स्थिति के साथ ऐसा करता है।

— साइमन ईस्ट

मैं इसके साथ एक नेविगेशन .activeकक्षा के रूप में उपयोग करता हूं li:before { visibility: hidden; }औरli.active:before { visibility: visible; }

— sshow

सर्वोत्तम सुझाव imo!

— बेन वेर्टोन्घेन

Answer 4

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

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Comments

दुर्भाग्य से, यह सीएसएस पाठ के रंगों का सम्मान नहीं करता है।

— हिटलर

ईमेल के लिए एकमात्र संभव समाधान

— ओलेग

जीमेल (नोव 2018) और आउटलुक 2016 दोनों के लिए अभी काम नहीं कर रहा है।

— user2875289

Answer 5

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

डेमो फिडल

Answer 6

मुझे अपना संस्करण भी जोड़ने दें, ज्यादातर मेरे लिए अपना पसंदीदा समाधान फिर से खोजने के लिए:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

https://codepen.io/burningTyger/pen/dNzgrQ

Comments

IMHO इसका अब तक का सबसे अच्छा समाधान है। साझा करने के लिए Thx!

— एक्सल

Answer 7

मेरे मामले में इस कोड को सीएसएस में जोड़ना

ul {
    list-style-type: '- ';
}

पर्याप्त था। जैसा है वैसा ही सरल।

Comments

यह मानते हुए कि यह सीएसएस के लिए एक अपेक्षाकृत नया अतिरिक्त है क्योंकि मुझे एक और उत्तर नहीं मिला है जो इसका उल्लेख करता है, लेकिन यह वास्तव में इन दिनों स्वीकृत उत्तर होना चाहिए।

— ahstro

यह केवल डेस्कटॉप फ़ायरफ़ॉक्स में समर्थित होने लगता है: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

— d

अब यह क्रोम में भी समर्थित है (जैसा कि मैं मानता हूं 79): chromestatus.com/feature/5893875400966144 और caniuse.com/#feat=mdn-css_properties_list-style-type_string

— एलेक्स

Answer 8

शीर्ष उत्तरों में से एक ने मेरे लिए काम नहीं किया, क्योंकि, थोड़ा परीक्षण और त्रुटि के बाद, ली: इससे पहले भी सीएसएस नियम प्रदर्शन की आवश्यकता थी: इनलाइन-ब्लॉक।

तो यह मेरे लिए पूरी तरह से काम का जवाब है:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

Comments

यह LESS / SASS में लिखा गया है।

— अरसलान अमीर

Answer 9

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

Comments

शायद `` `उल {मार्जिन: 0; सूची-शैली-प्रकार: कोई नहीं; } ul li: इससे पहले {content: "-";} `` `अन्यथा यह ol सूचियों को भी प्रभावित करता है

— साशा बॉन्ड

Answer 10

यहाँ मेरे fiddle संस्करण है:

(Modernizr) वर्ग .generatedcontentपर <html>व्यावहारिक रूप से IE8 + और हर दूसरे समझदार ब्राउज़र का मतलब है।

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

सीएसएस:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

Answer 11

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

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

EDIT: मैंने ओपी के दृष्टिकोण के साथ थोड़ा परीक्षण किया है। IE8 में, मुझे काम करने की तकनीक नहीं मिली, इसलिए यह निश्चित रूप से अभी तक क्रॉस-ब्राउज़र नहीं है। इसके अलावा, फ़ायरफ़ॉक्स और क्रोम में, सूची-शैली-प्रकार को किसी भी संयोजन में सेट करने पर ध्यान नहीं दिया जाता है।

Answer 12

मेरा समाधान इसमें mdash के साथ अतिरिक्त स्पैन टैग जोड़ने का है:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

और सीएसएस में जोड़ना:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

Answer 13

दूसरा रास्ता:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

Answer 14

सीएसएस:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

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

Comments

यह उन वस्तुओं के लिए काम नहीं करता है जो एक पंक्ति से अधिक की अवधि

— जेनलम्पटन

Answer 15

इसके बजाय लू ली, का उपयोग किया dl (definition list) and dd। <dd>मानक सीएसएस शैली का उपयोग करके परिभाषित किया जा सकता है जैसे {color:blue;font-size:1em;}कि html टैग के बाद आप जो भी प्रतीक लगाते हैं उसे मार्कर के रूप में उपयोग करते हैं। यह उल ली की तरह काम करता है, लेकिन आपको किसी भी प्रतीक का उपयोग करने की अनुमति देता है, आपको बस इंडेंट सूची प्रभाव प्राप्त करने के लिए इसे इंडेंट करना होगा जो आप आमतौर पर प्राप्त करते हैं ul li।

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

आप बहुत क्लीनर कोड देता है! इस तरह, आप मार्कर के रूप में किसी भी प्रकार के चरित्र का उपयोग कर सकते हैं! इंडेंट के बारे में है -10pxऔर यह सही काम करता है!

Comments

यह दो कारणों से काफी खराब है। सबसे पहले, आप अपने बुलेट वर्णों को सीधे पाठ में डाल रहे हैं, सामग्री और शैली का मिश्रण कर रहे हैं। दूसरे, आप dl तत्व का दुरुपयोग कर रहे हैं, यहाँ सही उपयोग पर एक लेख है ।

— मज्जाजनर

Answer 16

आज इस समस्या वाले किसी के लिए, समाधान बस है:

सूची-शैली: "-"

Answer 17

मेरे लिए क्या काम था

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>