সিএসএসের মাধ্যমে আদেশযুক্ত তালিকায় দ্বিতীয় লাইনের জন্য ইন্ডেন্ট কীভাবে রাখবেন?

Question

আমি তালিকার বুলেট বা দশমিক সংখ্যার সাথে উচ্চতর পাঠ্য ব্লকগুলি সহ সমস্ত ফ্লাশ করে একটি "অভ্যন্তর" তালিকা রাখতে চাই। তালিকার এন্ট্রিগুলির দ্বিতীয় লাইনের প্রথম সারির মতো একই ইনডেন্ট থাকতে হবে!

উদাহরণ:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. 

সিএসএস তার "তালিকা-শৈলী-অবস্থান" - এর ভিতরে এবং বাইরে কেবল দুটি মান সরবরাহ করে। "ভিতরে" দ্বিতীয় লাইনটি শীর্ষ পংক্তির সাথে নয় তবে পয়েন্ট তালিকার সাথে ফ্লাশ হয়:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

আমার তালিকা "বাহিরে" প্রস্থটি উচ্চতর পাঠ্য ব্লকগুলির সাথে আর ফ্লাশ নয়।

আনর্ডারড তালিকার জন্য প্রস্থের প্রস্থের পাঠ্য-ইনডেন্ট, প্যাডিং-বাম এবং মার্জিন-বাম কাজগুলি কিন্তু তারা অর্ডার করা তালিকার জন্য ব্যর্থ হয়েছে কারণ এটি তালিকা-দশমিকের অক্ষরের সংখ্যার উপর নির্ভর করে:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"11." এবং "12." "3" এর তুলনায় উচ্চতর পাঠ্য ব্লকের সাথে ফ্লাশ হয় না এবং "4."।

তাহলে আদেশযুক্ত তালিকাগুলি এবং দ্বিতীয়-লাইন-ইনডেন্টের গোপন রহস্যটি কোথায়? আপনার প্রচেষ্টার জন্য ধন্যবাদ!

Comments

ব্যবহারকারী পালি মাদ্রা একটি উত্তর হিসাবে এটি যোগ করেছে, তবে এটি আর কোনও এক্সপ্লানেশন না থাকার জন্য এটি মুছে ফেলা হয়েছে। তিনি বলেছিলেন যে জাসফিডাল আপনি যা খুঁজছেন তা হতে পারে: jsfiddle.net/palimadra/CZuXY/1

— bfavareto

কেবল প্যাডিং-বাম সেট করার চেষ্টা করুন ...

— ম্যাটজোন

এই প্রশ্নে কেউ যদি হোঁচট খায় তবে কে কেবল "বুনিয়াদী তালিকা অন্তর্ভুক্তি" সন্ধান করছে, এই প্রশ্নটি দেখুন ( স্ট্যাকওভারফ্লো / প্রশ্ন / ১75৫৫649৯6/২ ) এবং নাতাশা বনেগাস উত্তর।

— সানিরিড

একটি উত্তরও আসল প্রশ্নকে সম্বোধন করে না। আসল প্রশ্নটি কীভাবে তালিকার অঙ্কগুলি বাম-সারিবদ্ধ করতে হয়, যখন তালিকার আইটেমের পাঠ্যটি যখন দ্বিতীয় বা পরবর্তী লাইনে ওভারফ্লো হয় তখন তালিকার আইটেমের পাঠ্যটি আলাদাভাবে বাম-সারিবদ্ধ করার সময়। ডিফল্টরূপে - এবং প্রায় প্রতিটি উত্তরে - তালিকার অঙ্কগুলি ডানদিকে হয় এবং তালিকার আইটেমগুলির পাঠ্য বাম-প্রান্তরে থাকে।

— জেসি ওয়েস্টলেক

Answer 1

হালনাগাদ

এই উত্তরটি পুরানো। নীচের অন্য উত্তরে নির্দেশিত হিসাবে আপনি আরও অনেক সহজভাবে এটি করতে পারেন:

ul {
  list-style-position: outside;
}

Https://www.w3schools.com/cssref/pr_list-style-position.asp দেখুন

আসল উত্তর

আমি এখনও অবাক হইনি দেখে অবাক হই। আপনি ব্রাউজারের টেবিল বিন্যাস অ্যালগরিদম (টেবিল ব্যবহার না করে) এর মতো ব্যবহার করতে পারেন:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

ডেমো: http://jsfiddle.net/4rnNK/1/

এটি88 এ কাজ করার জন্য, :beforeএকটি কোলনের সাথে উত্তরাধিকার সূচনাটি ব্যবহার করুন ।

Comments

@Perelli fooমাত্র একটি অবাধ স্ট্রিং (ID), এটা সংযুক্ত হওয়ার জন্য ব্যবহার করা হয় counter-reset, counter-incrementএবং counter()বৈশিষ্ট্য।

— ব্যবহারকারী 123444555621

এছাড়াও আপনি ব্যবহার করে নড়বড়ে টেবিল কাপড় এড়াতে পারেন position: relativeউপর <li>এবং position: absoluteউত্পন্ন সামগ্রীতে। উদাহরণস্বরূপ jsfiddle.net/maryisdead/kgr4k দেখুন ।

— মেরিসিডেড

@maryisdead কেন 40px? কাউন্টারগুলি এর চেয়ে আরও প্রশস্ত হয়ে গেলে তা ভাঙ্গবে । টেবিল লেআউটটি ব্যবহারের পুরো বিষয়টিটি হ'ল ব্রাউজারটি স্বয়ংক্রিয়ভাবে সামগ্রীতে ফিট করে।

— ব্যবহারকারী 123444555621

দুর্দান্ত, তবে আপনি <li> নীচের মার্জিনটি কীভাবে নিয়ন্ত্রণ করবেন? <li> এর উচ্চতা কেবলমাত্র এতে থাকা টেবিল-কোষের উপাদানগুলির উচ্চতা দ্বারা নির্ধারিত হয়। সুতরাং, এই উপাদানগুলির উপর মার্জিন, প্যাডিং এবং উচ্চতার কোনও প্রভাব নেই। কিভাবে এই সীমাবদ্ধতা প্রায় কাজ?

— hschmieder

আপনার যদি একাধিক-লাইনের তালিকার আইটেম থাকে এবং অবিচ্ছিন্ন উল্লম্ব ফাঁকা স্থানের প্রয়োজন হয় তবে সমাধানটি হল সিলেক্টর নির্বাচনের সাথে উল্লম্ব সীমানা-ফাঁক যোগ করা, যেমন সীমানা-ফাঁকা স্থান: 0 3px; টেবিল-ঘরে সাধারণ প্যাডিং কাজ করে না কারণ সংখ্যাটি সবসময় কেবল একটি লাইন থাকে।

— রিমবেম

Answer 2

আমি বিশ্বাস করি এটি আপনি যা খুঁজছেন তা করবে।

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

জেএসফিডাল: https://jsfiddle.net/dzbos70f/

Comments

আপনি প্যাডিং-বামে যুক্ত করলে আরও ভাল: 1 মিম;

— বেনস গ্যাক্সেলি

এটি এই পৃষ্ঠার সমস্ত সমাধানের সেরা উত্তর। এটি অন্যদের তুলনায় অনেক বেশি সুবিধাজনক। আপনি যদি কোন উত্তরটি বেছে নিতে দ্বিধা বোধ করছেন তবে এইটি বেছে নিন।

— ভ্যালেন্টিন মার্সিয়ার

@ ফ্লোরমমনকি এটি দ্রুত এবং নোংরা তবে এটি বাস্তব সমাধান নয়। প্রথমত, 1emইনডেন্টের জায়গার সমান হয় না। লাইনগুলি পুরোপুরি পিক্সেল-অনুসারে সারিবদ্ধ হবে না। দ্বিতীয়ত, তালিকাটি যখন 10 নম্বরে পৌঁছেছে তখন কী হবে? 100? পাঠ্য-ইনডেন্টটি কাজ করবে না, এটি প্রান্তিককরণ করা হবে না। এই উত্তরটি নিচে ভোট দেওয়া উচিত।

— সানি

@ সানি এটি একটি ডিস্কের তালিকা নয় একটি নম্বরযুক্ত, সুতরাং কেন 100 এ গণনা করা হবে? উপরের কোডটি ব্যবহার করে আমার তালিকাগুলিতে কোনও সমস্যা নেই।

— Lorem বানর

@loremmonkey ইন্ডেন্ট নয় 1em। oi60.tinypic.com/a0eyvs.jpg প্রথম তালিকা-আইটেমটি উপরের পাঠ্য-ইনডেন্ট কৌশলটি ব্যবহার করছে। এটি সাধারণত তালিকা-শৈলী-অবস্থানের সাথে কীভাবে দেখায় তার সাথে তুলনা করুন: এর বাইরে এটি মিসলাইনড রয়েছে, এক্ষেত্রে একটি পিক্সেল দ্বারা বন্ধ।

— সানি

Answer 3

কোনও হ্যাক ছাড়াই সবচেয়ে সহজ এবং পরিষ্কার উপায় হ'ল কেবল ul(বা ol) ইনডেন্ট করা :

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

এটি গৃহীত উত্তর হিসাবে একই ফলাফল দেয়: https://jsfiddle.net/5wxf2ayu/

স্ক্রীনশট:

Comments

আপনি আবেদন list-style-position: outsideকরতে হতে পারে <li>।

— অ্যালেক্স

@ অ্যালেক্স আপনার কেবল তখনই এটি করা উচিত যদি আপনি কোনও বিদ্যমান শৈলীর ওভাররাইটটি চাপিয়ে দেন ( বিকাশকারী.মোজিলা.আর.ইন / ডকস / ওয়েব / সিএসএস / লিস্ট-স্টাইল- অবস্থান )।

— চক লে বাট

Answer 4

এই ভাঁড়টি দেখুন:

http://jsfiddle.net/K6bLp/

এটি সিএসএস ব্যবহার করে কীভাবে ম্যানুয়ালি উল এবং ওল্ড ইনডেন্ট করতে হয় তা দেখায়।

এইচটিএমএল

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

সিএসএস

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

এছাড়াও আমি আপনার ফিডল সম্পাদনা করেছি

http://jsfiddle.net/j7MEd/3/

এটি একটি নোট করুন।

Comments

আপনাকে ধন্যবাদ, এটি উলের জন্য এবং 9 টি তালিকার এন্ট্রি পর্যন্ত দুর্দান্ত কাজ করে। আমার প্রশ্নের প্রস্থে আমি 11/12-বিষয়টির বর্ণনা দিয়েছি এটিই প্রধান সমস্যা। উপরের আমার উদাহরণে আমি অন্য কৌশল চালিয়েছি যাতে সমস্যাটি অন্যরকম দেখায় তবে সমস্যার মূলটি একই থাকে: আমার দশমিক-তালিকা-বিন্দুতে যদি এক বা দুটি বা আরও বেশি সংখ্যক থাকে তবে একটি পার্থক্য রয়েছে - যেমন, 1., ১১ বা 111.! আমি সিএসএসের মাধ্যমে প্রতিক্রিয়া জানাতে এবং পাঠ্য-ইনডেন্ট এবং মার্জিন-বাম সংখ্যার সংখ্যায় সামঞ্জস্য করতে সক্ষম হচ্ছি এমন কোনও বিন্দু আমি দেখতে পাচ্ছি না।

— kernfrucht

ওল (দ্বিতীয় অঙ্কের চেয়েও বেশি) দ্বিতীয় লাইনের ইনডেন্টের জন্য, আমি মনে করি CSS এটি সমাধান করবে না। আমাদের কেবল জ্যাকুরির জন্য যাওয়া উচিত।

— দীপন বাবু

এছাড়াও নোট করুন যে জন্য typeবৈশিষ্ট্যটি <ol>এইচটিএমএল 5 এ অবচয় বলে মনে হচ্ছে style="list-style-type: "instead পরিবর্তে ব্যবহার করুন।

— এজে।

আপনার 21 জন কি আরও গুরুতর? এটা কাজ করে না. আপনি পোস্ট করার পর থেকে আপনি নিজের কোড পরিবর্তন করেছেন কিনা তা নিশ্চিত নন।

— জেগালার্ডো

Answer 5

আপনি মার্জিন এবং হয় একটি এর প্যাডিং সেট করতে পারেন olঅথবা ulCSS এ

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}

Comments

দুর্ভাগ্যক্রমে সমস্যাটি সমাধান না করে সমাধান করা হচ্ছে: দ্বিতীয় পংক্তির তালিকাটি পয়েন্টগুলি উচ্চতর সারির প্রস্থ নয়

— প্রবাহিত করে

Jsfiddle.net/j7MEd/1 এ 11 এবং 12 উপরের এবং নীচের অনুচ্ছেদের সাথে লাইন করুন এবং আমি কোডটি পরিবর্তন করি নি। আমি কিছু অনুপস্থিত করছি?

— luke2012

না, এটি বিন্দু নয়। মূল সমস্যাটি হ'ল প্রতিটি তালিকার পয়েন্টের দ্বিতীয় (এবং তৃতীয়, ইত্যাদি ...) লাইনের প্রথম লাইনের মতো একই "ইনডেন্ট" নেই! (jsfiddle- উদাহরণ দেখুন)। উপরের আমার প্রশ্নে আমি প্যাডিং, মার্জিন ইত্যাদির সাথে কাজ করার বিষয়ে চিন্তা করি তবে এটি কেবল আনর্ডার্ড তালিকার জন্য কাজ করে। আদেশযুক্ত তালিকায় এই জাতীয় 11/12 এর মতো নতুন সমস্যা দেখা দেয়। সুতরাং আমার মূল প্রশ্নটি হল: 11/12 জিনিসটির মতো সমস্যা না করে অর্ডার তালিকাগুলির জন্য আমি কীভাবে ইন্ডেন্ট-জিনিসটি পেতে পারি (যেমন আমি আমার প্রথম বক্তৃতাটি দিয়েছি) done

— kernfrucht

ঠিক আছে দুঃখিত! এটি একটি উপায় .. কেবলমাত্র ক্রস-ব্রাউজার অর্জন করা আপনার IE এবং মার্চীন ফায়ারফক্সে প্যাডিং সেট করতে হবে। jsfiddle.net/j7MEd/2

— luke2012

Answer 6

আমি বিশ্বাস করি আপনার কেবল প্যাডিংয়ের বাইরে 'বুলেট' তালিকা রাখা দরকার।

li {
    list-style-position: outside;
    padding-left: 1em;
}

Answer 7

আপনি একটি ব্যাপ্তি নির্বাচন করতে সিএসএস ব্যবহার করতে পারেন; এই ক্ষেত্রে, আপনি তালিকা আইটেমগুলি 1-9 চান:

ol li:nth-child(n+1):nth-child(-n+9) 

তারপরে সেই প্রথম আইটেমগুলিতে যথাযথভাবে মার্জিন সামঞ্জস্য করুন:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

এটি এখানে কর্মে দেখুন: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

Answer 8

নিম্নলিখিত সিএসএস কৌশলটি করেছে:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}

Answer 9

আমার সমাধান হিসেবে বেশ একই Pumbaa80 এর এক, কিন্তু আমি ব্যবহার করতে সুপারিশ display: tableপরিবর্তে display:table-rowজন্য liউপাদান। সুতরাং এটি কিছু হবে:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

সুতরাং এখন আমরা liএর মধ্যে ব্যবধানের জন্য মার্জিন ব্যবহার করতে পারি

Answer 10

আমি নিজেই এই সমাধানটি বেশ পছন্দ করি:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}

Comments

শুধুমাত্র সমস্যা হরফ আকার

— এটিকেল

Answer 11

ওল, উল তালিকাগুলি কাজ করবে যদি আপনি চান আপনি সীমান্ত সহ একটি টেবিলও ব্যবহার করতে পারেন: CSS এর মধ্যে কোনওটি নয়।

Comments

আমি মনে করি এটি শব্দার্থবিজ্ঞানের নিয়মগুলি সম্পর্কে একটি ভাল সমাধান নয়

— kernfrucht

Answer 12

সিএসএস তার "তালিকা-শৈলী-অবস্থান" - এর ভিতরে এবং বাইরে কেবল দুটি মান সরবরাহ করে। "ভিতরে" দ্বিতীয় লাইনটি শীর্ষ পংক্তির সাথে নয় তবে পয়েন্ট তালিকার সাথে ফ্লাশ হয়:

আদেশযুক্ত তালিকাগুলিতে, হস্তক্ষেপ ছাড়াই, যদি আপনি "তালিকা-শৈলী-অবস্থানকে" মান "অভ্যন্তরে" দেন তবে দীর্ঘ তালিকা আইটেমের দ্বিতীয় লাইনের কোনও ইনডেন্ট থাকবে না, তবে তালিকার বাম প্রান্তে ফিরে যাবে (যেমন এটি আইটেমের সংখ্যার সাথে বাম-সারিবদ্ধ হবে)। অর্ডার করা তালিকার পক্ষে এটি অদ্ভুত এবং আনর্ডারড তালিকাগুলিতে ঘটে না।

আপনি যদি পরিবর্তে "তালিকা-শৈলী-অবস্থান" মান "বাইরের" দিয়ে থাকেন তবে দ্বিতীয় লাইনে প্রথম লাইনের মতোই ইনডেন্ট থাকবে।

আমার সীমানা সহ একটি তালিকা ছিল এবং এই সমস্যাটি ছিল। "তালিকা-শৈলী-অবস্থান" "" ভিতরে "সেট করার সাথে, আমার তালিকাটি এটির মতো লাগেনি। তবে "তালিকা-শৈলী-অবস্থান" "বাইরে" সেট করে, তালিকার আইটেমগুলির সংখ্যা বাক্সের বাইরে পড়ে।

আমি কেবল পুরো তালিকার জন্য আরও বিস্তৃত বাম মার্জিন সেট করে এটি সমাধান করেছি, যা পুরো তালিকাটিকে ডান দিকে ঠেলে দিয়েছে, আগের অবস্থানে ফিরে এসেছিল।

সিএসএস:

#.classname {মার্জিন: 0; প্যাডিং: 0;

#.classname li {মার্জিন: 0.5 এম 0 0 0; প্যাডিং-বাম: 0; তালিকা-শৈলী-অবস্থান: বাইরে;}

এইচটিএমএল:

<ol class="classname" style="margin:0 0 0 1.5em;">

Answer 13

ঠিক আছে, আমি ফিরে গিয়ে কিছু জিনিস বের করেছিলাম। আমি যে প্রস্তাব দিচ্ছিলাম এটি এটি একটি কঠিন সমাধান, তবে এটি কার্যকরী বলে মনে হচ্ছে।

প্রথমত, আমি সংখ্যাগুলি সীমাহীন তালিকার তালিকা তৈরি করেছি। আনঅর্ডারার্ড তালিকার প্রতিটি তালিকা আইটেমের শুরুতে সাধারণত একটি ডিস্ক থাকে (

) তাই আপনাকে তালিকা-শৈলীতে সিএসএস সেট করতে হবে: কোনওটি নয়;

তারপরে, আমি পুরো তালিকাটি প্রদর্শন করেছি: টেবিল-সারি। এখানে, আমি কেন কোডটি গ্যাব করার পরিবর্তে কেবল আপনাকে পেস্ট করব না?

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

সিএসএস:

ul li{
list-style: none;
display: table-row;
text-align: right;

}

div {
float: left;
display: inline-block;
margin: 0.2em;

}

এটি প্রথম বিভাগে আদেশ তালিকার সংখ্যার সাথে ২ য় ডিভিতে পাঠ্যটিকে সারিবদ্ধ বলে মনে হচ্ছে। আমি একটি ট্যাগ দিয়ে তালিকা এবং পাঠ্য উভয়কেই ঘিরে ফেলেছি যাতে আমি সমস্ত ডিভগুলিকে কেবল ইনলাইন-ব্লক হিসাবে প্রদর্শন করতে পারি। এটি তাদের সুন্দরভাবে সাজিয়ে রেখেছে।

প্রান্তকাল এবং পাঠ্য শুরুর মধ্যবর্তী স্থান রাখার জন্য রয়েছে। অন্যথায়, তারা একে অপরের বিরুদ্ধে সরাসরি দৌড়াচ্ছে এবং এটি চোখের দুরার মতো দেখাচ্ছে।

বাম-হাতের প্রান্তিকতা নয়, আমার নিয়োগকর্তা প্রথম লাইনের শুরুতে সজ্জিত (দীর্ঘতর বাইবেলিওগ্রাফিকাল এন্ট্রিগুলির জন্য) মোড়ানো-পাঠ্য পাঠ্য চেয়েছিলেন। মূলত আমি একটি ধনাত্মক মার্জিন এবং নেতিবাচক পাঠ্য ইনডেন্টের সাথে ফিগার হয়ে যাচ্ছিলাম, কিন্তু তখন আমি বুঝতে পেরেছিলাম যে আমি যখন দুটি আলাদা ডিভগুলিতে স্যুইচ করেছি, তখন এটি তৈরির প্রভাব ছিল যাতে পাঠ্যটি সমস্ত লাইনে আবদ্ধ থাকে কারণ ডিভের বাম-হাতের মার্জিন পাঠ্যটি স্বাভাবিকভাবেই শুরু হয়েছিল এমন মার্জিন। সুতরাং, আমার প্রয়োজনীয় সমস্ত জায়গা ছিল একটি 0.2 মিমি মার্জিনের জন্য কিছু জায়গা যুক্ত করা এবং অন্য সব কিছুই সাঁতার কাটে।

আমি আশা করি যদি ওপি-তে একই সমস্যা ঘটে থাকে তবে ... আমি তাকে বুঝতে খুব কষ্ট পেয়েছিলাম time

Answer 14

আমি এই একই সমস্যা ছিল এবং ব্যবহারকারীর 123444555621 এর উত্তর ব্যবহার শুরু করেছি । যাইহোক, আমি এছাড়াও প্রতিটি যোগ করতে হবে paddingএবং একটি প্রয়োজন , যে সমাধান অনুমতি দেয় না কারণ প্রতিটি এক ।borderlilitable-row

প্রথমে আমরা সংখ্যার counterপ্রতিরূপ তৈরি করতে একটি ব্যবহার করি ol।

আমরা তখন সেট display: table;প্রতিটি liএবং display: table-cellউপর :beforeআমাদের খাঁজ দিতে।

অবশেষে, জটিল অংশ। যেহেতু আমরা পুরো টেবিল লেআউটটি ব্যবহার করছি না আমাদের olপ্রতিটি :beforeএকই প্রস্থের তা নিশ্চিত করা দরকার । আমরা chইউনিটটি মোটামুটি অক্ষরের সংখ্যার প্রস্থের সমান রাখতে ব্যবহার করতে পারি । যখন এর সংখ্যাগুলির সংখ্যা :beforeপৃথক হয় তখন প্রস্থকে অভিন্ন রাখতে আমরা পরিমাণ অনুসন্ধানগুলি প্রয়োগ করতে পারি । ধরে নিই যে আপনি জানেন যে আপনার তালিকাগুলি 100 টি আইটেম বা তার বেশি হবে না, :beforeএর প্রস্থ পরিবর্তন করার জন্য আপনাকে কেবল একটি পরিমাণ কোয়েরি বিধি প্রয়োজন , তবে আপনি সহজেই আরও যুক্ত করতে পারেন।

ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>