CSS: बुलेट और <li> के बीच नियंत्रण स्थान

Question

मैं कितना क्षैतिज स्थान एक गोली उसके धक्का नियंत्रित करना चाहते हैं <li>एक में सही करने के लिए <ol>या <ul>।

यानी हमेशा होने के बजाय

*  Some list text goes
   here.

मुझे लगता है कि होने के लिए बदलने में सक्षम होना चाहते हैं

*         Some list text goes
          here.

या

*Some list text goes
 here.

मैंने चारों ओर देखा, लेकिन केवल पूरे ब्लॉक को बाएं या दाएं स्थानांतरित करने के लिए निर्देश पा सकता था, उदाहरण के लिए, http://www.alistapart.com/articles/taminglists/

Comments

लगभग stackoverflow.com/questions/2441059/…

— rds

Answer 1

इसकी सामग्री spanको अपेक्षाकृत अधिक स्थिति में रखें, तो आप इस स्थान को leftसंपत्ति के द्वारा नियंत्रित कर सकते हैं span।

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

Comments

बस स्पष्ट करने के लिए, <span> टैग शब्दार्थ हो सकता है जब इसे एक वर्ग सौंपा जाता है, उदाहरण के लिए <span class = "tel"> 123-456-7890 </ span> का अर्थ अर्थपूर्ण होता है।

— निगलना

+1 वास्तव में लड़के के सवाल का जवाब देने के लिए;) (हालांकि वास्तविक जीवन में स्पैन को आदर्श रूप में होना चाहिए, अच्छी प्रैक्टिस फ्यूचरप्रूफिंग के साथ-साथ शब्दार्थ के लिए वैसे भी एक वर्ग है: यदि भविष्य में किसी भी जावास्क्रिप्ट या नई सुविधाओं के विकास आदि में अतिरिक्त स्पैन जोड़ने का एक अच्छा कारण था। आपकी सामग्री के लिए, चीजें गड़बड़ हो सकती हैं)

— user56reinstatemonica8

फ़ायरफ़ॉक्स में ठीक से प्रदर्शित नहीं होता है पाठ इस चाल का उपयोग करते हुए गोलियों को ओवरलैप कर रहा है

— जे भालोड़ी

@ मैं कहीं भी यह सच नहीं है, क्योंकि मुझे ऐसा कुछ भी नहीं मिला जो इस दावे को साबित करता हो। क्या आप कोई स्रोत प्रदान कर सकते हैं?

— WoIIe

@ हमोल हम्म। यह एक पुरानी टिप्पणी है, और मुझे इस बात की चिंता नहीं है - यदि ऐसा है कि टैग या टैग <SPAN>का उपयोग कर सकते हैं, तो W3C पर एक नज़र डालें । यदि प्रश्न यह है कि क्या यह शब्दार्थ अर्थ को व्यक्त कर सकता है, तो इस उत्तर को देखें । तकनीकी रूप से, टैग अपने आप में एक गैर-शब्दार्थ इनलाइन तत्व है, लेकिन किसी तरह से इसके पुन: उपयोग में अधिक लचीलापन देता है। आजकल, मेरा मानना है कि एक बहुत अधिक रेंजिंग विकल्पों की अनुमति देने के लिए डिस्क्रिप्टर का उपयोग कर सकते हैं । idclass<SPAN>inline-block

— ingyhere

Answer 2

अन्य उत्तरों को यहाँ संक्षेप में प्रस्तुत करना है - यदि आप <li>सूची आइटम में गोलियों और पाठ के बीच के स्थान पर बेहतर नियंत्रण चाहते हैं , तो आपके विकल्प निम्न हैं:

(1) एक पृष्ठभूमि छवि का उपयोग करें:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

लाभ:

• आप बुलेट के लिए अपनी इच्छित किसी भी छवि का उपयोग कर सकते हैं
• आप background-positionपिक्सेल, ईएमएस या% का उपयोग करके पाठ के संबंध में कहीं भी छवि को स्थिति में लाने के लिए सीएसएस का उपयोग कर सकते हैं

नुकसान:

• आपके पृष्ठ पर एक अतिरिक्त (यद्यपि छोटी) छवि फ़ाइल जोड़ता है, जिससे पृष्ठ का वजन बढ़ जाता है
• यदि कोई उपयोगकर्ता अपने ब्राउज़र पर पाठ का आकार बढ़ाता है, तो गोली मूल आकार में रहेगी। पाठ का आकार बढ़ने पर यह आगे भी स्थिति से बाहर हो जाएगा
• यदि आप चौड़ाई के लिए केवल प्रतिशत का उपयोग करते हुए एक 'उत्तरदायी' लेआउट विकसित कर रहे हैं, तो बुलेट को प्राप्त करना मुश्किल हो सकता है, जहाँ आप इसे स्क्रीन की चौड़ाई से अधिक चाहते हैं

2. <li>टैग पर पैडिंग का उपयोग करें

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

लाभ:

• कोई छवि नहीं = 1 कम फ़ाइल डाउनलोड करने के लिए
• पर गद्दी को समायोजित करके <li>, आप जितना जोड़ सकते हैं अतिरिक्त की तरह गोली और आप के रूप में पाठ के बीच क्षैतिज स्थान
• यदि उपयोगकर्ता पाठ का आकार बढ़ाता है, तो रिक्ति और बुलेट का आकार आनुपातिक रूप से होना चाहिए

नुकसान:

• ब्राउज़र डिफ़ॉल्ट की तुलना में बुलेट को पाठ के किसी भी करीब नहीं ले जा सकता
• सीएसएस के अंतर्निहित बुलेट प्रकारों के आकार और आकार तक सीमित
• बुलेट का रंग टेक्स्ट जैसा होना चाहिए
• गोली की ऊर्ध्वाधर स्थिति पर कोई नियंत्रण नहीं है

(३) पाठ को एक अतिरिक्त <span>तत्व में लपेटें

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

लाभ:

• कोई छवि नहीं = 1 कम फ़ाइल डाउनलोड करने के लिए
• आप विकल्प के साथ की तुलना में गोली की स्थिति पर अधिक नियंत्रण होता (2) - आप इसे करीब पाठ करने के लिए स्थानांतरित कर सकते हैं (हालांकि मेरे सबसे अच्छे प्रयासों के बावजूद ऐसा लगता है आप को जोड़कर ऊर्ध्वाधर स्थिति नहीं बदल सकते हैं padding-topकरने के लिए <span>कोई और हो सकता है। इसके लिए एक समाधान, हालांकि ...)
• बुलेट पाठ के लिए एक अलग रंग हो सकता है
• यदि उपयोगकर्ता अपने पाठ का आकार बढ़ाता है, तो बुलेट को अनुपात में स्केल करना चाहिए (बशर्ते कि आप पेसिंग और मार्जिन सेट करें ems px नहीं)

नुकसान:

• एक अतिरिक्त असमान तत्व की आवश्यकता होती है (यह वास्तविक जीवन में आपकी तुलना में SO पर अधिक मित्रों को खो देगा;) लेकिन यह उन लोगों के लिए कष्टप्रद है जो अपने कोड को जितना संभव हो उतना दुबला और कुशल होना पसंद करते हैं, और यह प्रस्तुति और सामग्री के पृथक्करण का उल्लंघन करता है। वह HTML / CSS ऑफ़र करने वाला है)
• गोली के आकार और आकार पर कोई नियंत्रण नहीं

यहां CSS4 में कुछ नई सूची-शैली सुविधाओं के लिए उम्मीद की जा रही है, इसलिए हम छवियों या एक्स्टा मार्क-अप का सहारा लिए बिना स्मार्ट बुलेट बना सकते हैं :)

Comments

बहुत बढ़िया जवाब। # 2 काम करने के लिए, सुनिश्चित करें कि आप अपनी सूची-शैली-स्थिति बनाए रखें outside।

— टॉम ऑगर

अवधि तत्व मेरे लिए ठीक है। I + 1'द इस उत्तर को केवल इसलिए कि मैंने नकारात्मक मार्जिन को नकारात्मक पूर्ण स्थिति में पसंद किया - बिना किसी अच्छे कारण के।

— 20

यदि आपके पास वह पाठ है जो उन पंक्तियों को लपेटता है जो मैंने पाया है कि मुझे display: block;स्पैन तत्व में जोड़ना था तो लिपटे हुए पाठ को भी पंक्तिबद्ध किया जाएगा (मैंने स्पैन के बजाय एंकर टैग का उपयोग करके भी समाप्त कर दिया)

— केविन एम

किसी भी चीज़ के लिए पृष्ठभूमि चित्रों का उपयोग करना, जो कि लगभग हमेशा एक बहुत बुरा विचार नहीं है। उन्हें बचाया नहीं जा सकता, मुद्रित नहीं किया जाता है और स्क्रीन पाठकों द्वारा उल्लेख नहीं किया जाता है। इसे हल करने के लिए <span> ist सबसे सुरुचिपूर्ण तरीका है। पैडिंग काम नहीं करेंगे क्योंकि वे गोलियों की स्थिति भी बदलते हैं।

— बछसौ

मैं इस के लिए पृष्ठभूमि छवि का उपयोग कभी नहीं होगा। आप हमेशा उपयोग कर सकते हैं: सामग्री के साथ तत्व से पहले: "•"; फिर, आप इसे नियंत्रित करने के लिए तत्व से पहले पैडिंग और निरपेक्ष स्थिति का उपयोग करते हैं।

— यान चाबोट

Answer 3

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

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

Comments

मुझे विश्वास नहीं हो रहा है कि यह उत्तर स्वीकार नहीं किया गया है। यह 100% CSS है, इसमें कोई अतिश्योक्तिपूर्ण <span> तत्व नहीं जोड़ा गया है, और इसने मुझे अंत में समझा कि क्यों अंदर / बाहर का विकल्प है! (और यह उल्लेख किए गए डुप्लिकेट प्रश्न का स्वीकृत उत्तर है ...)

— माइंडटेलर

तत्वों का उपयोग list-style-position: outsideऔर पैडिंग LIआपको बुलेट बिंदुओं के बीच की दूरी बढ़ाने की अनुमति देता है, लेकिन यह अभी भी ब्राउज़र निर्दिष्ट ऑफसेट से परे अन्य तरीके से काम नहीं करता है। देखें इस जे एस बिन ।

— मेसागोमा

परिशिष्ट: आधुनिक ब्राउज़रों (IE9 +, FF, Chrome, आदि) में, बुलेट बिंदु और सामग्री के बीच लागू की गई दूरी को नकारने के text-indentलिए <UL>या पर नकारात्मक का उपयोग करें । अर्थात्, दूरी बढ़ाने के लिए ऊपर दिखाए गए अनुसार और बुलेट बिंदु और वांछित सामग्री के बीच की दूरी को कम करने के लिए कम करें। <LI><LI>padding-lefttext-indent

— मेसागोमा

अफसोस , उल्लेख डेस्कटॉप ब्राउज़र ऊपर के सभी, के लिए अगर एक की सामग्री को <LI>एक दूसरे लाइन में wraps, इस तरह के बाद लाइनों खत्म किया जा रहा है मार्जिन / padding / मांगपत्र है कि हम के माध्यम से पहली पंक्ति के लिए पूर्ववत करने में कामयाब के आधार पर फिर से इंडेंट text-indent। उच्छ्वास

— मेसागोमा

एक अन्य विकल्प का उपयोग करना है: छद्म तत्वों से पहले और जो कुछ भी आप चाहते हैं उसे सामग्री सेट करें। इच्छानुसार छद्म तत्वों की स्थिति।

— केविन

Answer 4

पुराना सवाल है, लेकिन: पहले छद्म तत्व यहां अच्छी तरह से काम करता है।

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

यह वास्तव में अच्छी तरह से काम करता है और कई अतिरिक्त नियमों या HTML की आवश्यकता नहीं है।

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

चीयर्स!

Comments

अच्छा और सरल जवाब। मैं उस सेटिंग को जोड़ margin-left: -5pxदूंगा (या जो भी मान) गोली और <li>तत्व के बीच की जगह को कम कर देगा

— बाइनरीफंट

नोट: यह लटकते हुए इंडेंट का समर्थन नहीं करता है

— एरिक

बहुत बढ़िया जवाब, यह पूरी तरह से काम का सबसे न्यूनतम राशि के साथ काम किया! धन्यवाद!

— काइलफ़ारिस

Answer 5

के लिए सूची-शैली-प्रकार: इनलाइन :

यह लगभग DSMann8 के उत्तर के समान है लेकिन कम सीएसएस कोड है।

आपको बस जरूरत है

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

चियर्स

Comments

यह list-style-position: insideभी काम करता है, जो बहुत अच्छा है!

— मैट डॉज

Answer 6

आप उपयोग कर सकते हैं padding-leftसूची आइटम पर विशेषता ( नहीं सूची पर ही!)।

Comments

कृपया ध्यान दें list-style-positionकि डिफ़ॉल्ट पर सेट होने पर ही यह काम करता है outside।

— अगस्त

यह स्वीकृत उत्तर होना चाहिए, कम से कम सामान्य उपयोग के लिए। यह <span>केवल डिजाइन उद्देश्य के लिए एक तत्व का उपयोग करने से बचता है ।

— यूकेरस

Answer 7

ली पर पाठ-इंडेंट का उपयोग करना सबसे अच्छा काम करता है।

पाठ-इंडेंट: -x px; गोली को ली और इसके विपरीत के करीब ले जाएगा।

आईई के लिए पुराने संस्करणों के साथ नकारात्मक बायीं तरफ रिश्तेदार का उपयोग करना ठीक से काम नहीं कर सकता है। PS- जितना हो सके पोज़िशन देने से बचें।

Comments

यह क्रोम पर अजीब व्यवहार करता है। -5 पीएक्स पर कम जगह पर स्नैप;

— इवान वारबर्टन

Answer 8

यहाँ एक और समाधान है css काउंटर और छद्म तत्वों का उपयोग। मुझे यह अधिक सुरुचिपूर्ण लगता है क्योंकि इसमें अतिरिक्त html मार्कअप और न ही सीएसएस कक्षाओं के उपयोग की आवश्यकता नहीं होती है:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

मैं नॉन ब्रेकेबल स्पेस का उपयोग करता हूं ताकि रिक्ति केवल मेरी सूची तत्वों की पहली पंक्ति को प्रभावित करे (यदि सूची तत्व एक पंक्ति से अधिक लंबा है)। आप इसके बजाय यहां पैडिंग का उपयोग कर सकते हैं।

Answer 9

पुराना सवाल है लेकिन फिर भी प्रासंगिक है। मैं नकारात्मक का उपयोग करने की सलाह देता हूं text-indent। list-style-positionहोना ही चाहिए outside।

पेशेवरों:

• बुलेट ठीक से स्वचालित रूप से तैनात है
• बदलें फ़ॉन्ट आकार बुलेट की स्थिति को नहीं तोड़ता है
• कोई अतिरिक्त तत्व नहीं (नहीं :: छद्म तत्व भी)
• CSS में बदलाव के बिना RTL और LTR दोनों के लिए काम करता है।

विपक्ष:

• प्रयत्न
• सेवा
• खोज
• एक :)

Comments

मैंने इस पद्धति का उपयोग करने की कोशिश की, लेकिन इंडेंट मेरे लिए काम नहीं करता है यदि लाइन ब्रेक हैं। पाठ इंडेंट केवल पहली पंक्ति इंडेंट करेगा।

— मैट

Answer 10

एक अनियंत्रित सूची उल टैग के साथ शुरू होती है। प्रत्येक सूची आइटम के साथ शुरू होता है सूची आइटम डिफ़ॉल्ट रूप से गोलियों (छोटे काले घेरे) के साथ चिह्नित किया जाएगा:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

आउटपुट:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

टेक्स्ट-इंडेंट प्रॉपर्टी एक टेक्स्ट-ब्लॉक में पहली पंक्ति के इंडेंटेशन को निर्दिष्ट करती है।
नोट: नकारात्मक मूल्यों की अनुमति है। मान नकारात्मक होने पर पहली पंक्ति बाईं ओर इंडेंट की जाएगी।

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Comments

उत्तर के लिए धन्यवाद, कृपया दूसरों के समझ में आसानी के लिए, हालांकि, अपने समाधान को एनोटेट करने का प्रयास करें।

— cdomination

यह सबसे अच्छा उत्तर है और इसे स्वीकार किया जाना चाहिए। न्यूनतम सीएसएस!

— KawaiKx

Answer 11

ऐसा लगता है कि आप (कुछ) <li> टैग पर पैडिंग का उपयोग करके रिक्ति को नियंत्रित कर सकते हैं।

<style type="text/css">
    li { padding-left: 10px; }
</style>

पकड़ यह है कि यह आपको अपने अंतिम उदाहरण की तरह इसे-स्नग करने की अनुमति नहीं देता है।

उसके लिए आप सूची-शैली-प्रकार को बंद करने और & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

Answer 12

यदि आप केवल बुलेट बिंदु और पाठ के बीच रिक्ति को कम करना चाहते हैं, तो एक बहुत क्लीनर समाधान प्रतीत होता है:

li:before {
    content: "";
    margin-left: -0.5rem;
}

Answer 13

आप वैकल्पिक के रूप में एक पृष्ठभूमि छवि प्रतिस्थापन का भी उपयोग कर सकते हैं, जिससे आपको ऊर्ध्वाधर और क्षैतिज स्थिति पर कुल नियंत्रण मिल जाएगा।

इस प्रश्न का उत्तर देखें

Answer 14

ul
{
list-style-position:inside;
} 

परिभाषा और उपयोग

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

स्रोत: http://www.w3schools.com/cssref/pr_list-style-position.asp

Comments

इस सवाल का जवाब नहीं है। यह इंडेंटेशन के आकार को नियंत्रित करने के लिए विधि पूछता है।

— एसोटेरिक स्क्रीन नाम

Answer 15

आप उपयोग कर सकते हैं ul li:beforeऔर एक पृष्ठभूमि छवि और निर्दिष्ट करें position: relativeऔर position:absoluteकरने के लिए liऔर li:before, क्रमशः। इस तरह से आप एक छवि बना सकते हैं और जहाँ भी आप ली के सापेक्ष चाहते हैं, उसे स्थिति में ला सकते हैं।

Answer 16

टैग के padding-left:1em; text-indent:-1emलिए उपयोग करें <li>।
फिर, टैग list-style-position: insideके <ul>लिए।

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

Answer 17

जब आप पाठ को बुलेट के करीब ले जाना चाहते हैं और भले ही आपके पास पाठ की कई पंक्तियाँ हों, तो निम्न समाधान अच्छी तरह से काम करता है ।

margin-right आपको बुलेट के करीब पाठ को स्थानांतरित करने की अनुमति देता है

text-indent यह सुनिश्चित करता है कि पाठ की कई पंक्तियाँ अभी भी सही ढंग से पंक्तिबद्ध हों

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

Answer 18

<span style="display: flex;">प्रत्येक के अंदर उपयोग करें <li>।