আনর্ডারড তালিকা আইটেম থেকে ইন্ডেন্টেশন কীভাবে সরানো যায়?

Question

আমি সমস্ত ইন্ডেন্টেশন এখান থেকে সরাতে চাই ul। আমি সেটিং চেষ্টা margin, padding, text-indentকরতে 0, কিন্তু কোন উপকার। দেখে মনে হচ্ছে যে text-indentaণাত্মক সংখ্যায় সেট করা কৌশলটি কাজ করে - তবে প্রকৃতপক্ষে ইন্ডেন্টেশন সরানোর একমাত্র উপায় এটি?

Comments

আপনার এইচটিএমএল এবং সিএসএস দিয়ে বলা শক্ত তবে একটি সিএসএস রিসেট / নরমালাইজ করুন নিয়মগুলি সমন্বিত: উল-প্যাডিং: 0; মার্জিন: 0; most বেশিরভাগ ক্ষেত্রে কৌশলটি করে। আমি নিশ্চিত যে টেক্সট-ইনডেন্ট এর সাথে কোনও সম্পর্ক নেই।

— জাওয়াদ

আপনি আসলে কী করছেন তা না দেখে সমস্যাটি কী তা বলা মুশকিল। উভয় মার্জিন এবং প্যাডিংকে উল থেকে 0 এ সেট করা ক্রস ব্রাউজারে কাজ করা উচিত।

— কিনাকুটা

"কাজ হয়নি। এবং সিএসএস রিসেট ব্যবহার করতে পারবেন না My আমার পরিবর্তনগুলি দৈত্য ওয়েব কাঠামোর অংশ যা এতে on০ জনের বেশি লোক এতে কাজ করছে" - হাহাহা। আপনি আপনার প্রশ্নটি পরিষ্কারভাবে জিজ্ঞাসা করেননি তার চেয়ে বেশি!

— জাওয়াদ

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> গুলি সমস্ত লাইন সঠিকভাবে ইনডেন্ট করে না the এটি আপনি সম্পাদনা চালিয়ে যান আপনি শেষ পর্যন্ত আমার সমাধানটি শেষ করতে পারেন। : ডি

— জেপসি

দ্বিতীয় সমাধান যা বুলেটটি রাখে তা আর কাজ করে না বলে মনে হয় (উইন্ডোজে ক্রোম 55)। কোন বিকল্প?

— টম পাউরেক

@ টমপৌরেক চেষ্টা 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> এর বুলেটটি সাধারণ অনুচ্ছেদে পাঠ্যের আশেপাশের দিকে নির্দেশ করে (<ul> এর ইনডেন্টিং মুছে ফেলা হয়েছে)।
• <li> উপাদানগুলির মধ্যে থাকা পাঠ্য ব্লকগুলি একাধিক লাইনে ঘিরে রাখলে সঠিকভাবে ইন্টেন্টেড থাকে।

---

উত্তরাধিকার তথ্য:
আইই সংস্করণ 8 এবং নীচের জন্য আপনাকে অবশ্যই মার্জিন-বাম ব্যবহার করতে হবে:

    ul { margin-left: 1.2em; }

Comments

আমি ইতিমধ্যে আমার পোস্টে সমস্ত সমস্যা ব্যাখ্যা করেছি, @ আইওউবে। তবে এখানে আবার: গৃহীত উত্তর (এখনও হিসাবে স্থিতি, কারণ আমার মূল পোস্টের পরে এটি উন্নত করতে একাধিকবার সম্পাদনা করা হয়েছে) এখন বুলেটগুলি বজায় রাখে (যদি আপনি প্রদত্ত দ্বিতীয় উদাহরণটি ব্যবহার করেন) তবে এটি বুলেটযুক্ত মাল্টলাইন সঠিকভাবে ইনডেন্ট করে না পাঠ্য। প্রভাবটি দেখানোর জন্য পরিবর্তিত গৃহীত উত্তরের দ্বিতীয় উদাহরণের ঝাঁকুনি এখানে রয়েছে : jsfiddle.net/v6nyuq6f/88 এবং এখানে আমার পদ্ধতির সাথে একই ফিডল সংশোধন করা হয়েছে: jsfiddle.net/v6nyuq6f/89

— Jpsy

সুতরাং এটি 2016 এবং এমন কোনও মূল্যের উপর নির্ভর করা যা "সমস্ত ব্রাউজারের জন্য উপযুক্ত নয়" এই সুন্দর সমস্যাটির সবচেয়ে পরিষ্কার সমাধান is CSS3 বৈশিষ্ট্যগুলি ব্যবহার করে আইটেম প্রতীকটির সঠিক প্রস্থের কোনও উপায় কী আছে?

— F30

কেবল নিরাপদ থাকতে:ul { padding-left:1.2em; margin-left: 0; }

— অ্যান্ড্রু মারফি

এই পৃষ্ঠায় কেবল সমাধান, যা দীর্ঘ তালিকার আইটেমগুলির সাথে সঠিকভাবে কাজ করে (সঠিকভাবে প্রায় মোড়ানো) - ধন্যবাদ!

— ফ্রেডেভেঞ্জার

Answer 3

এটি আপনার সিএসএসে যুক্ত করুন:

ul { list-style-position: inside; }

এটি অন্যান্য অনুচ্ছেদের এবং পাঠ্যের মতো একই উপাদানগুলিতে লি উপাদানগুলিকে রাখবে।

তথ্যসূত্র: http://www.w3schools.com/cssref/pr_list-style-position.asp

Comments

<li> গুলি একাধিক পাঠ্য লাইনের সাথে, list-style-position: insideদ্বিতীয়টির পাঠ্য এবং নীচের সমস্ত লাইনের বুলেটটি সারিবদ্ধ করে। এটি অবশ্যই কাম্য নয়।

— Jpsy

Answer 4

display:table-row; ইন্ডেন্টেশন থেকে মুক্তি পাবে তবে বুলেটগুলি সরিয়ে ফেলবে।

Answer 5

প্যাডিং সরান:

padding-left: 0;

Answer 6

তুমি কি একটি লিংক সরবরাহ করতে পার ? ধন্যবাদ আমি একবার নজর দিতে পারি সম্ভবত আপনার সিএসএস নির্বাচনকারী যথেষ্ট শক্তিশালী না বা আপনি চেষ্টা করতে পারেন

padding:0!important;

Comments

০.

— raam86

!importantহয় শয়তানি

— Madbreaks

@ ম্যাডব্র্যাকস এটি কাজ করতে পারে যদি নির্বাচকটি সঠিক হয় এবং ব্যবহারের ক্ষেত্রেটি সঠিক হয় তবে আপনার ডানটি সম্ভবত এটি নাও হতে পারে, সম্ভবত এই ক্ষেত্রে একটি মূল সিএসএস বিধি রয়েছে যা বেস ফাইলটি পরিবর্তন করে ওভাররাইড করা দরকার, তাই এটি বাকী থাকবে হ্যাকিং কোর না পছন্দ? আমি জানি না আমি ভুল হতে পারি

— naeluh

Answer 7

ফুটারের সাথে আমারও একই সমস্যা আছে আমি ভাগ করার চেষ্টা করছি। আমি দেখতে পেয়েছি যে এটি সম্মিলিত উপরের কয়েকটি পরামর্শের চেষ্টা করে আমার জন্য কাজ করেছে:

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

এটি আমার এইচ 1 এর নীচে বামে রাখবে বলে মনে হয় এবং বুলেটটি বাইরে বামের চেয়ে ডিভের ভিতরে থাকে।

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: "●";
}

যেহেতু মূল প্রশ্নটি এর প্রয়োজনীয়তা সম্পর্কে অস্পষ্ট, তাই আমি অন্য উত্তরগুলির দ্বারা নির্ধারিত গাইডলাইনগুলির মধ্যে এই সমস্যাটি সমাধান করার চেষ্টা করেছি। নির্দিষ্টভাবে:

• বাইরের অনুচ্ছেদে পাঠ্যের সাহায্যে তালিকা বুলেটগুলি সারিবদ্ধ করুন
• একই তালিকা আইটেমের মধ্যে একাধিক লাইন সারিবদ্ধ করুন

আমি এমন একটি সমাধানও চেয়েছিলাম যা ব্রাউজারগুলির উপর নির্ভর করে না যে কত প্যাডিং ব্যবহার করবে on আমি সম্পূর্ণতার জন্য একটি অর্ডার তালিকা যোগ করেছি।

Answer 9

এই ইনলাইনটি করে, আমি মার্জিনটি 0 (উল স্টাইল = "মার্জিন: -0px") তে সেট করেছি। বুলেটগুলি অনুচ্ছেদে কোনও প্রকারের ওভারহান ছাড়াই সারিবদ্ধ হয়।

Comments

আমি বুঝতে পারছি না যে আপনি কেন একটি শূন্যের সামনে নেতিবাচক চিহ্ন ছাড়া অন্যকে ভোট দিয়েছেন। আমি গুগল ক্রোমে এটি চেষ্টা করেছি এবং এটি কাজ করেছে, যেখানে প্যাডিং-বাম: 0 সমাধানটি হয়নি। এটি গুগল ক্রোম সংস্করণ 79.0.3945.88 উইনএক্স, 64৪ বিটে রয়েছে।

— মিঃপোটাতোহিড

উপরের আমার মন্তব্যে যুক্ত করা ... যেহেতু আমি এটি সম্পাদনা করতে পারি না ... আমি এটি আরও কিছুটা খেললাম এবং সর্বশেষতম ফায়ারফক্সে (71১.০), আচরণটি একই রকম। যাইহোক, এটি আনর্ডারড তালিকার সাথে রয়েছে (উল)। অর্ডার করা তালিকাগুলি (ওএল) ব্যবহার করার সময়, 1.2 মিমি তালিকার বাম প্রান্তটিকে অন্য পাঠ্যের বাম মার্জিনের সাথে সারিবদ্ধ বলে মনে হচ্ছে (উপরে জেপসি উত্তর অনুসারে)।

— মিঃপোটাতোহিড