किसी अनियंत्रित सूची आइटम से इंडेंटेशन कैसे निकालें?

Question

मैं सभी इंडेंटेशन को दूर करना चाहता हूं ul। मैं स्थापित करने की कोशिश की margin, padding, text-indentकरने के लिए 0, लेकिन कोई लाभ नहीं हुआ। लगता है कि text-indentएक नकारात्मक संख्या के लिए सेटिंग चाल है - लेकिन यह है कि वास्तव में केवल इंडेंटेशन को दूर करने का एकमात्र तरीका है?

Comments

अपने HTML और CSS के साथ कहना कठिन है, लेकिन एक सीएसएस रीसेट का उपयोग करना / नियमों से मिलकर सामान्य करना उल {पैडिंग: 0; मार्जिन: 0;} ज्यादातर मामलों में चाल है। मुझे यकीन है कि टेक्स्ट-इंडेंट का इससे कोई लेना-देना नहीं है।

— जावद

यह देखे बिना कि आप वास्तव में क्या कर रहे हैं, यह कहना मुश्किल है कि समस्या क्या है। मार्जिन और पैडिंग दोनों को 0 पर सेट करना, क्रॉस-ब्राउज़र पर काम करना चाहिए।

— किनाकुटा

"काम नहीं किया। और सीएसएस रीसेट का उपयोग नहीं किया जा सकता है। मेरे परिवर्तन एक विशाल वेब फ्रेमवर्क का हिस्सा हैं, जिसमें 60 से अधिक लोग काम कर रहे हैं।" - हाहा। आपने अपने प्रश्न को स्पष्ट रूप से नहीं पूछा है!

— जावद

Answer 1

कुछ भी नहीं करने के लिए सूची शैली और बाईं गद्दी सेट करें।

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

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

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

गोलियों आप बदल सकते हैं बनाए रखने के लिए list-style: noneके साथ list-style-position: insideया आशुलिपि list-style: inside:

ul {
  list-style-position: inside;
  padding-left: 0;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Comments

आप इनडेंट्स को हटा सकते हैं और नंबरिंग / बुलेट्स को रख सकते हैं: उल {सूची-शैली-स्थिति: अंदर; पैडिंग-लेफ्ट: 0;}

— मायफोर्विक

ठीक है, अब जब आपने अपने उत्तर को संपादित किया तो गोलियों को बनाए रखा गया है, लेकिन अभी भी समस्या है कि कई पाठ लाइनों के साथ <li> s सभी लाइनों को सही ढंग से इंडेंट नहीं करता है। यह आप संपादित करते रहें, आप अंत में मेरे समाधान के साथ समाप्त हो सकते हैं। : D

— Jpsy

दूसरा उपाय जो बुलेट रखता है वह अब काम नहीं करता है (क्रोम 55 विंडोज पर)। कोई विकल्प?

— टॉम पॉजरेक

@ TomPažourek प्रयास करें list-style-position: outside; padding-left: 1em;पर<ul>

— j08691

@ j08691: हाँ, यह काम करता है, हालाँकि 1emबात थोड़ी जादुई है ... और वास्तव में अभी थोड़ा सा आक्रोश बाकी है।

— टॉम पैजोर्रेक

Answer 2

<Ul> इंडेंटेशन हटाने का मेरा पसंदीदा उपाय एक सरल सीएसएस वन-लाइनर है:

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

यह समाधान न केवल हल्का है, बल्कि कई फायदे हैं:

• यह अच्छी तरह से बाएँ-संरेखित करता है <ul> 's बुलेट पॉइंट्स को आसपास के सामान्य पैराग्राफ़ (= <ul> निकाले गए) का इंडेंट करता है।
• <Li> तत्वों के भीतर पाठ ब्लॉक सही ढंग से इंडेंट किए जाते हैं यदि वे कई लाइनों में चारों ओर लपेटते हैं।

---

लीगेसी जानकारी:
IE संस्करण 8 और नीचे के लिए आपको इसके बजाय मार्जिन-बाएं का उपयोग करना होगा:

    ul { margin-left: 1.2em; }

Comments

मैंने अपनी पोस्टिंग, @aioobe में पहले से ही सभी समस्याओं को समझाया। लेकिन यहां फिर से: स्वीकृत उत्तर (अब तक की स्थिति, क्योंकि मेरी मूल पोस्टिंग के बाद इसे सुधारने के लिए कई बार संपादित किया गया है) अब गोलियों को बनाए रखता है (यदि आप दिए गए दूसरे उदाहरण का उपयोग करते हैं), लेकिन यह सही ढंग से बुलेटेड मल्टीलाइन को इंडेंट नहीं करता है पाठ। यहाँ स्वीकार किए गए उत्तर के दूसरे उदाहरण की

— फ़ेल्ड है

तो यह 2016 है और कुछ मूल्य पर निर्भर है जो "सभी ब्राउज़रों के लिए बिल्कुल सही नहीं है" इस सुंदर आम समस्या का सबसे साफ समाधान है। क्या आइटम प्रतीक की सटीक चौड़ाई प्राप्त करने का कोई तरीका है, शायद CSS3 सुविधाओं का उपयोग कर?

— 11:30

बस सुरक्षित होने के लिए:ul { padding-left:1.2em; margin-left: 0; }

— एंड्रयू मर्फी

इस पृष्ठ पर केवल समाधान, जो लंबी सूची आइटम (सही तरीके से लपेटें) के साथ सही ढंग से काम करता है - धन्यवाद!

— फ्रेडविकेन

Answer 3

इसे अपने सीएसएस में जोड़ें:

ul { list-style-position: inside; }

यह अन्य एलिमेंट्स और टेक्स्ट की तरह ही एलिमेंट को इंडेंट में रखेगा।

Ref: http://www.w3schools.com/cssref/pr_list-style-position.asp

Comments

कई पाठ लाइनों के साथ <li> s पर, list-style-position: insideबुलेट के साथ दूसरी और सभी निम्नलिखित पंक्तियों के पाठ को संरेखित करता है। यह निश्चित रूप से वांछनीय नहीं है।

— जेपीसी

Answer 4

display:table-row; इंडेंटेशन से भी छुटकारा मिलेगा लेकिन गोलियों को हटा देगा।

Answer 5

गद्दी निकालें:

padding-left: 0;

Answer 6

क्या आप लिंक प्रदान कर सकते हैं ? धन्यवाद मैं देख सकता हूँ सबसे अधिक संभावना है कि आपका सीएसएस चयनकर्ता पर्याप्त रूप से मजबूत नहीं है या आप कोशिश कर सकते हैं

padding:0!important;

Comments

— 0.18 को

!importantहै बुराई

— Madbreaks

@Madbreaks यह काम कर सकता है यदि चयनकर्ता सही एक है और उपयोग का मामला सही है, लेकिन आपकी सही संभावना यह नहीं है, शायद इस मामले में एक मुख्य सीएसएस नियम है जिसे आधार फ़ाइल को बदलने के साथ ओवरराइड करने की आवश्यकता है, इसलिए उसे छोड़ दिया जाए। हैकिंग कोर की तरह नहीं? मुझे नहीं पता कि शायद मैं गलत हूं

— naeluh

Answer 7

मैं एक पाद लेख के साथ एक ही समस्या है मैं विभाजित करने की कोशिश कर रहा हूँ। मैंने पाया कि उपरोक्त सुझावों में से कुछ को मिलाकर मेरे लिए यह काम किया गया:

footer div ul {
    list-style-position: inside;
    padding-left: 0;
}

यह मेरे h1 के नीचे बाईं ओर रखने के लिए लगता है और div के अंदर बुलेट अंक बाईं ओर बाहर के बजाय।

Answer 8

लाइव डेमो: https://jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

चूंकि मूल प्रश्न इसकी आवश्यकताओं के बारे में स्पष्ट नहीं है, इसलिए मैंने अन्य उत्तरों द्वारा निर्धारित दिशानिर्देशों के भीतर इस समस्या को हल करने का प्रयास किया। विशेष रूप से:

• सूची पैराग्राफ को बाहर पैराग्राफ टेक्स्ट के साथ संरेखित करें
• एक ही सूची आइटम के भीतर कई पंक्तियों को संरेखित करें

मुझे ऐसा समाधान भी चाहिए था जो ब्राउज़रों पर निर्भर न हो कि कितने पैडिंग का उपयोग करना है। मैंने पूर्णता के लिए एक आदेशित सूची जोड़ी है।

Answer 9

इस इनलाइन को करते हुए, मैंने मार्जिन को 0 (ul style = "मार्जिन: -0px") पर सेट किया है। बुलेट पैरा के साथ संरेखित करते हैं जिसमें कोई ओवरहांग नहीं होता है।

Comments

मुझे समझ में नहीं आता है कि शून्य के सामने नकारात्मक संकेत के अलावा आपको क्यों वोट दिया गया था। मैंने Google Chrome पर इसकी कोशिश की और यह काम कर गया, जबकि पैडिंग-लेफ्ट: 0 सॉल्यूशन नहीं था। यह Google Chrome संस्करण 79.0.3945.88 WinX, 64 बिट पर है।

— MrPotatoHead

ऊपर अपनी टिप्पणी में जोड़ना ... चूंकि मैं इसे संपादित नहीं कर सकता ... मैंने इसे थोड़ा और अधिक खेला, और नवीनतम फ़ायरफ़ॉक्स (71.0) पर, व्यवहार समान है। हालांकि, यह अनियंत्रित सूचियों (उल) के साथ है। आदेशित सूचियों (ol) का उपयोग करते समय, 1.2em अन्य पाठ के बाएं मार्जिन (ऊपर Jpsy उत्तर के साथ) के साथ सूची के बाएं किनारे को संरेखित करता है।

— MrPotatoHead