मुझे बिना किसी गोलियों के एक अनियंत्रित सूची की आवश्यकता है

Question

मैंने एक अनियंत्रित सूची बनाई है। मुझे लगता है कि अनियंत्रित सूची में गोलियां परेशान हैं, इसलिए मैं उन्हें निकालना चाहता हूं।

क्या गोलियों के बिना एक सूची होना संभव है?

Answer 1

आप की स्थापना करके गोलियों को हटा सकते हैं list-style-typeकरने के लिए none(आमतौर पर एक माता पिता के तत्व के लिए सीएसएस पर <ul>,) उदाहरण के लिए:

ul {
  list-style-type: none;
}

आप यह भी जोड़ सकते हैं padding: 0और margin: 0है कि आप के साथ ही खरोज निकालना चाहते हैं।

सूची स्वरूपण तकनीकों के एक महान पूर्वाभ्यास के लिए सूची- प्रदर्शक देखें ।

Comments

@tovmeod मेरे IE9 (Win7 पर) में ठीक काम करता है। (यह एक जटिल पृष्ठ है, एक साधारण पीओसी नहीं, शायद कुछ और व्यवहार बदल गया है)

— डेविड बालैसिक

अगर आप भी मेरी तरह हैं और इंडेंट को हटाने का तरीका खोज रहे हैं, तो इसे देखें - stackoverflow.com/a/13939142/846727

— कुणाल

ओह, कितनी बार मैं प्रति के लिए यहाँ वापस आ गए हैं / पेस्ट :)

— Jonathan.Brink

पैडिंग और मार्जिन पर अच्छा स्पर्श

— इवगेनी क्लेपिलिन

Answer 2

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो इसमें एक "अस्थिर" वर्ग है:

सूची आइटम पर डिफ़ॉल्ट सूची-शैली और बाएं गद्दी निकालें (केवल तत्काल बच्चे)।

बूटस्ट्रैप 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

बूटस्ट्रैप 3 और 4:

<ul class="list-unstyled">
   <li>...</li>
</ul>

बूटस्ट्रैप 3: http://getbootstrap.com/css/#type-lists

बूटस्ट्रैप 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

Comments

यदि हम प्रत्येक सीएसएस फ्रेमवर्क के लिए कक्षाएं सूचीबद्ध करते हैं, तो हम StackOverflow पर गड़बड़ करेंगे। एक त्वरित Google खोज से पता चलता है कि बूटस्ट्रैप का उपयोग केवल 2% वेबसाइटों द्वारा अपने चरम पर किया गया था, और निश्चित रूप से फ्लेक्सबॉक्स और सीएसएस ग्रिड जैसे अधिक समझदार समाधानों की शुरूआत के साथ गिर रहा है।

— पीजे ब्रूनेट

वास्तव में, यह उत्तर वही है जो मैं खोज रहा था। और बूटस्ट्रैप का उपयोग पूरे इंटरनेट के 3.6% द्वारा किया जाता है, इसलिए यह गिर नहीं रहा है। Trends.builtwith.com/docinfo/Twitter-Bootstrap एक त्वरित Google खोज बताती है कि बूटस्ट्रैप को लगातार "सबसे लोकप्रिय सीएसएस फ्रेमवर्क" श्रेणी में रखा गया है।

— बोबोर्ट

Answer 3

आपको उपयोग करने की आवश्यकता है list-style: none;

<ul style="list-style: none;">
    <li>...</li>
</ul>

Comments

ध्यान रखें कि इनलाइन css फाइलों में css को ओवरराइड करता है। अनुप्रयोग / विकास प्रथाओं के आधार पर यह वास्तव में कष्टप्रद हो सकता है।

— मार्क बैजेंस

Answer 4

पिछले उत्तरों के लिए छोटा परिशोधन: यदि वे अतिरिक्त स्क्रीन लाइनों पर फैल जाते हैं तो लंबी लाइनों को अधिक पठनीय बनाने के लिए:

ul, li {list-style-type: none;}

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

Comments

काम करता है, लेकिन केवल IE8 के लिए

— अंडरकवर

यह और list-style-type: none;दोनों पर डाल अनावश्यक है । आप सिर्फ एक कर सकते हैं। ulli

— मफल्यूहर

Answer 5

आप इस पर काम करने के लिए असमर्थ हैं, तो <ul>स्तर, आप जगह की जरूरत हो सकती list-style-type: none;पर <li>का स्तर:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

इस पुनरावृत्ति से बचने के लिए आप CSS क्लास बना सकते हैं:

<style>
ul.no-bullets li
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

जब आवश्यक हो, का उपयोग करें !important:

<style>
ul.no-bullets li
{
    list-style-type: none !important;
}
</style>

Answer 6

मैंने गोलियों को हटाने के लिए उल और ली दोनों पर सूची-शैली का उपयोग किया। मैं बुलेट को कस्टम वर्ण से बदलना चाहता था, इस मामले में 'डैश'। यह एक अच्छी तरह से प्रेरित प्रभाव देता है जो पाठ के लपेटने पर काम करता है।

ul.dashed-list {
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

Answer 7

ulडिफ़ॉल्ट शैली को पूरी तरह से हटाने के लिए :

    list-style-type: none;

    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;

Answer 8

यदि आप इसे केवल शुद्ध HTML के साथ पूरा करना चाहते हैं, तो यह समाधान सभी प्रमुख ब्राउज़रों में काम करेगा:

विवरण सूची

बस निम्नलिखित HTML का उपयोग कर:

<dl>
  <dt>List Item 1</dt>
    <dd>Sub-Item 1.1</dd>
  <dt>List Item 2</dt>
    <dd>Sub-Item 2.1</dd>
    <dd>Sub-Item 2.2</dd>
    <dd>Sub-Item 2.3</dd>
  <dt>List Item 3</dt>
    <dd>Sub-Item 3.1</dd>
</dl>

जो निम्नलिखित के समान एक सूची का उत्पादन करेगा:

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

यहाँ उदाहरण: https://jsfiddle.net/zumcmvma/2/

यहाँ संदर्भ: https://www.w3schools.com/tags/tag_dl.asp

Comments

यदि आप इस पद्धति का उपयोग करने जा रहे हैं, तो उस शब्द को परिभाषित करने के <dt>लिए शब्द और उस शब्द की परिभाषा में प्रवेश करने के शब्दार्थ रूप से उचित तरीके का उपयोग करें <dd>।

— बोबोर्ट

Answer 9

यह बुलेट बिंदुओं के बिना लंबित सूची का आदेश देता है। सिर्फ एक लाइन में!

li {
    display: block;
}

Comments

तकनीकी नोट: यह काम करता है क्योंकि यह डिफ़ॉल्ट displayमान को ओवरराइड करता है <li>, जो है display: list-item;।

— mfluehr

Answer 10

यदि आप एक मौजूदा थीम विकसित कर रहे हैं, तो संभव है कि थीम में कस्टम सूची शैली हो।

इसलिए यदि आप list-style: none;उल या ली टैग का उपयोग करके सूची शैली को बदल नहीं सकते हैं, तो पहले जांच लें !importantक्योंकि शायद शैली की कुछ अन्य रेखा आपकी शैली को ओवरराइट कर रही है।

अगर ऐसा नहीं है तो सामग्री की जांच करें li:before। फिर करो:

li:before { dispaly: none; }

Answer 11

 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>

Answer 12

मैंने कोशिश की और देखा:

header ul {
   margin: 0;
   padding: 0;
}

Comments

यह वास्तव में गोलियों को नहीं निकालता है। उन्हें बस ऑफ स्क्रीन धक्का मिलता है।

— मफल्यूहर

Answer 13

यदि आप सीएसएस का सहारा लिए बिना चीजों को सरल रखना चाहते हैं, तो मैं बस  अपनी कोड लाइनों में एक डाल देता हूं। यानी, <table></table>।

हाँ, यह कुछ जगह छोड़ देता है, लेकिन यह एक बुरी बात नहीं है।

Comments

-1 सरल? बिना सीएसएस? यही कारण है कि कई वेबसाइटें चौंकाने वाली स्थिति में हैं। सीएसएस सादगी जोड़ता है। टेबल्स आगे का रास्ता नहीं हैं।

— वेबनोब