সিএসএস: বুলেট এবং <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> ট্যাগটি ক্লাস নির্ধারিত হলে শব্দার্থক হতে পারে, উদাহরণস্বরূপ <স্প্যান ক্লাস = "টেলি"> 123-456-7890 </span> স্পষ্টতই শব্দার্থক।

— ingyhere

প্রকৃতপক্ষে লোকটির প্রশ্নের উত্তর দেওয়ার জন্য +1;) (যদিও বাস্তব জীবনে স্প্যানের আদর্শিকভাবে ভবিষ্যতের প্রুফের পাশাপাশি শব্দার্থবিজ্ঞানের জন্য একটি ক্লাস থাকা উচিত: ভবিষ্যতে যদি কোনও জাভাস্ক্রিপ্ট বা নতুন বৈশিষ্ট্য বিকাশ ইত্যাদির অতিরিক্ত স্প্যান যোগ করার উপযুক্ত কারণ ছিল আপনার বিষয়বস্তুতে, জিনিসগুলি অগোছালো হতে পারে)

— user56reinstatemonica8

ফায়ারফক্সে সঠিকভাবে প্রদর্শন করা হয় না এই কৌশলটি ব্যবহার করে বুলেটগুলি ওভারল্যাপ করে দেওয়া হচ্ছে

— জয় ভালোদি

@ ইঙ্গিত আমি এখানে সত্য সন্দেহ করি না, যেহেতু আমি এই দাবি প্রমাণিত করার মতো কোনও কিছুই পাই না। আপনি কোন উত্স সরবরাহ করতে পারেন?

— ওওআইইউ

@ ওয়াল হ্ম্ম্ম্ম এটি একটি পুরানো মন্তব্য, এবং আমি উদ্বেগের বিষয়ে নিশ্চিত নই - যদি এটি <SPAN>ব্যবহার করতে হয় idবা classট্যাগ করতে পারে তবে ডাব্লু 3 সি তে একবার দেখুন । যদি এটি প্রশ্নটির অর্থ বোঝাতে পারে কিনা তবে এই উত্তরটি দেখুন । প্রযুক্তিগতভাবে, <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পিক্সেল, ইএমএস বা% ব্যবহার করে টেক্সটের সাথে ইচ্ছামত যে কোনও জায়গায় চিত্রটি অবস্থান করতে সিএসএস ব্যবহার করতে পারেন

অসুবিধা:

• পৃষ্ঠার ওজন বাড়িয়ে আপনার পৃষ্ঠায় একটি অতিরিক্ত (ছোট হলেও) চিত্র ফাইল যুক্ত করে
• কোনও ব্যবহারকারী যদি তাদের ব্রাউজারে পাঠ্যের আকার বাড়ায় তবে বুলেটটি আসল আকারে থাকবে। পাঠ্যের আকার বাড়ার সাথে সাথে এটি সম্ভবত অবস্থানের বাইরে চলে যাবে
• আপনি যদি প্রস্থের জন্য শতকরা শতাংশ ব্যবহার করে একটি 'প্রতিক্রিয়াশীল' লেআউট্ট বিকাশ করছেন তবে বুলেটটি ঠিক যেখানে চান সেখানে পর্দার প্রস্থের বিস্তৃত অংশে খুঁজে পাওয়া আপনার পক্ষে কঠিন হতে পারে

২. <li>ট্যাগে প্যাডিং ব্যবহার করুন

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

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

সুবিধাদি:

• ডাউনলোড করার জন্য কোনও চিত্র = 1 কম ফাইল নেই
• এর উপর প্যাডিং সামঞ্জস্য করে <li>, আপনি বুলেট এবং পাঠ্যের মধ্যে যতটা বাড়তি অনুভূমিক স্থান পছন্দ করতে পারেন
• যদি ব্যবহারকারী পাঠ্যের আকার বাড়ায় তবে ব্যবধান এবং বুলেট আকারটি আনুপাতিকভাবে স্কেল করা উচিত

অসুবিধা:

• বুলেটটি ব্রাউজারের ডিফল্টের চেয়ে পাঠ্যের আরও কাছাকাছি যেতে পারে না
• সিএসএসের অন্তর্নির্মিত বুলেট ধরণের আকার এবং আকারগুলিতে সীমাবদ্ধ
• বুলেটটি অবশ্যই পাঠ্যের মতো রঙের হতে হবে
• বুলেটটির উল্লম্ব অবস্থানের উপর কোনও নিয়ন্ত্রণ নেই

(3) একটি অতিরিক্ত <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> অন্য কেউ থাকতে পারে। যদিও এটির জন্য একটি কর্মসূচী ...)
• বুলেটটি পাঠ্যের আলাদা রঙ হতে পারে
• যদি ব্যবহারকারী তাদের পাঠ্যের আকার বৃদ্ধি করে, বুলেটটি অনুপাতের পরিমাণে স্কেল করা উচিত (আপনাকে পডিং এবং মার্জিনটি ইএমএসে সেট করে না তবে px নয়)

অসুবিধা:

• একটি অতিরিক্ত অযৌক্তিক উপাদান প্রয়োজন (এটি সম্ভবত সত্যজীবনের তুলনায় আপনার বেশি বন্ধুকে হারাবে;) তবে যারা তাদের কোডটিকে যতটা সম্ভব পাতলা এবং দক্ষ হতে পছন্দ করে তাদের জন্য এটি বিরক্তিকর এবং এটি উপস্থাপনা এবং বিষয়বস্তুর বিভাজন লঙ্ঘন করে এইচটিএমএল / সিএসএস অফার করার কথা রয়েছে)
• বুলেটটির আকার এবং আকারের উপর কোনও নিয়ন্ত্রণ নেই

এখানে CSS4- এ কয়েকটি নতুন তালিকা-শৈলীর বৈশিষ্ট্যগুলির জন্য প্রত্যাশী, যাতে আমরা চিত্রগুলি বা এক্সটা মার্ক-আপকে অবলম্বন না করে স্মার্ট স্মার্ট বুলেটগুলি তৈরি করতে পারি :)

Comments

দুর্দান্ত উত্তর। # 2 কাজ করার জন্য, আপনি নিজের তালিকা-স্টাইল-অবস্থানটি বজায় রাখার বিষয়ে নিশ্চিত হন outside।

— টম অগার

স্প্যান উপাদানটি আমার জন্য স্থির। আমি এই উত্তরটি কেবলমাত্র +1 করেছি কারণ আমি নেতিবাচক পরম অবস্থানকে নেতিবাচক মার্জিনকে অগ্রাধিকার দিয়েছি - কোনও ভাল কারণ নেই।

— ফ্লিপএমসিএফ

আপনার কাছে যদি রেখাগুলি মোড়ানো থাকে তবে আমি দেখতে পেলাম যে আমাকে মোড়কের জন্য যুক্ত display: block;করতে হয়েছে যাতে মোড়ানো পাঠ্যটিও সীমাবদ্ধ থাকে (আমি স্প্যানগুলির পরিবর্তে অ্যাঙ্কর ট্যাগ ব্যবহার করেও শেষ করেছি)

— কেভিন এম

যে কোনও কিছুর জন্য পটভূমি চিত্র ব্যবহার করা প্রায়শই সর্বদা খুব খারাপ ধারণা। এগুলি সংরক্ষণ করা যায় না, মুদ্রিত হয় না এবং স্ক্রিন পাঠকরা উল্লেখ করেন না। <span> ব্যবহার করা এটি সমাধান করার জন্য সবচেয়ে মার্জিত উপায় নয়। প্যাডিংগুলি কাজ করবে না কারণ তারা বুলেটের অবস্থানও পরিবর্তন করে।

— বাচসউ

আমি এর জন্য ব্যাকগ্রাউন্ড চিত্রটি কখনও ব্যবহার করব না। আপনি সর্বদা: সামগ্রীটির সাথে উপাদানটির আগে ব্যবহার করতে পারেন: "•"; তারপরে, উপাদানটিকে নিয়ন্ত্রণের জন্য আপনি এর আগে প্যাডিং এবং পরম অবস্থান ব্যবহার করেন।

— ইয়ান চাবোট

Answer 3

এটি করা উচিত। আপনার বুলেটগুলি বাইরের দিকে সেট করতে ভুলবেন না। আপনি সিএসএস সিউডো উপাদানগুলিও ব্যবহার করতে পারেন যদি আপনি তাদের আই 7-তে নীচে ফেলে দিতে পারেন। আমি সত্যিই এই ধরণের জিনিসটির জন্য সিউডো উপাদান ব্যবহার করার পরামর্শ দিচ্ছি না তবে এটি দূরত্ব নিয়ন্ত্রণে কাজ করে।

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% সিএসএস, এটি কোনও অতিরিক্ত অতিরিক্ত <span> উপাদান যুক্ত করে না এবং এটি কেন আমাকে অভ্যন্তরীণ / বাইরে বিকল্প রয়েছে তা অবশেষে বুঝতে বাধ্য করে! (এবং এটি উল্লিখিত সদৃশ প্রশ্নের স্বীকৃত উত্তর ...)

— মাইন্ড টেইলর

উপাদানগুলিতে ব্যবহার list-style-position: outsideএবং প্যাডিং LIআপনাকে বুলেট পয়েন্টগুলির মধ্যে দূরত্ব বাড়ানোর অনুমতি দেয় তবে এটি এখনও ব্রাউজারের নির্দিষ্ট অফসেটের বাইরে অন্যভাবে কাজ করে না। দেখুন এই জাতীয় বিন ।

— মেসাগোমা

সংযোজন: আধুনিক ব্রাউজারগুলিতে (আই 9 +, এফএফ, ক্রোম, ইত্যাদি), বুলেট পয়েন্ট এবং সামগ্রীর মধ্যে ব্রাউজার প্রয়োগকারী দূরত্বকে অস্বীকার করতে বা নেতিবাচক ব্যবহার text-indentকরুন । এটি হ'ল দূরত্ব বাড়ানোর জন্য উপরে প্রদর্শিত হিসাবে বৃদ্ধি করুন এবং বুলেট পয়েন্ট এবং পছন্দসই সামগ্রীর মধ্যে দূরত্ব হ্রাস করতে হ্রাস করুন। <UL><LI><LI>padding-lefttext-indent

— মেসাগোমা

হায়রে , উপরে উল্লিখিত সমস্ত ডেস্কটপ ব্রাউজারগুলির জন্য, যদি <LI>দ্বিতীয় লাইনে কোনও মোড়কের বিষয়বস্তু আবৃত হয়, তবে পরবর্তী লাইনগুলি মার্জিন / প্যাডিং / ইনডেন্টের উপর ভিত্তি করে পুনরায় প্রবেশ করা হয় যা আমরা প্রথম লাইনের মাধ্যমে পূর্বাবস্থায় ফিরে এসেছি 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>

এটি সত্যই ভাল কাজ করে এবং অনেকগুলি অতিরিক্ত বিধি বা এইচটিএমএল প্রয়োজন হয় না।

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

চিয়ার্স!

Comments

সুন্দর এবং সহজ উত্তর। আমি যুক্ত করব যে সেটিংটি margin-left: -5px(বা যে কোনও মানই) বুলেট এবং <li>উপাদানগুলির মধ্যে স্থান হ্রাস করবে

— বাইনারিফ্যান্ট

দ্রষ্টব্য: এটি হ্যাঙ্গিং ইনডেন্টগুলি সমর্থন করে না

— এরিক

দুর্দান্ত উত্তর, এটি সবচেয়ে ন্যূনতম কাজের সাথে পুরোপুরি কাজ করেছে! ধন্যবাদ!

— কাইলফারিস

Answer 5

জন্য তালিকা-শৈলী-টাইপ: ইনলাইন :

এটি ডিএসএমএন ৮ এর উত্তর মত তবে কম সিএসএস কোডের মতোই।

আপনার শুধু দরকার

<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>কেবল ডিজাইনের উদ্দেশ্যে কোনও উপাদান ব্যবহার করা এড়ানো যায় ।

— eukras

Answer 7

লিটিতে পাঠ্য-ইন্ডেন্ট ব্যবহার করা সবচেয়ে ভাল কাজ করে।

পাঠ্য-ইনডেন্ট: -x px; বুলেটটি লি এবং তদ্বিপরীতের আরও কাছে চলে যাবে।

নেতিবাচক বামে স্প্যানটিতে আপেক্ষিক ব্যবহার সম্ভবত IE এর পুরানো সংস্করণগুলির সাথে সঠিকভাবে কাজ করতে পারে না। পিএস- আপনি যতটা পজিশন দেওয়া এড়াতে পারেন।

Comments

এটি ক্রোমে অদ্ভুত আচরণ করে। -5px এ সামান্য জায়গায় স্ন্যাপস;

— ইয়ান ওয়ারবার্টন

Answer 8

সিএসএস কাউন্টার এবং সিউডো উপাদান ব্যবহার করে এখানে আরও একটি সমাধান দেওয়া হয়েছে। আমি এটি আরও মার্জিত বলে মনে করি কারণ এটির জন্য অতিরিক্ত এইচটিএমএল মার্কআপ বা সিএসএস ক্লাস ব্যবহারের প্রয়োজন হয় না:

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।

পেশাদাররা:

• বুলেট সঠিকভাবে স্বয়ংক্রিয়ভাবে অবস্থিত
• ফন্টের আকার পরিবর্তন করে বুলেট অবস্থানটি ভাঙবে না
• অতিরিক্ত উপাদান নেই (না :: ছদ্ম-উপাদানগুলিও)
• সিএসএসে পরিবর্তন না করে আরটিএল এবং এলটিআর উভয়ের পক্ষে কাজ করে।

কনস:

• চেষ্টা
• প্রতি
• অনুসন্ধান
• এক :)

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>

পাঠ্য-ইনডেন্ট বৈশিষ্ট্য একটি পাঠ্য-ব্লকের প্রথম লাইনের ইন্ডেন্টেশন নির্দিষ্ট করে।
দ্রষ্টব্য: gণাত্মক মান অনুমোদিত। মানটি নেতিবাচক হলে প্রথম লাইন বাম দিকে অভিযুক্ত হবে।

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

Comments

উত্তরের জন্য ধন্যবাদ, অন্যের বোঝার সুবিধার্থে দয়া করে আপনার সমাধানগুলি টিকিয়ে দেওয়ার চেষ্টা করুন।

— আধিপত্য

এটি সেরা উত্তর এবং গ্রহণ করা উচিত। সর্বনিম্ন সিএসএস!

— কাওয়াইএক্সএক্স

Answer 11

দেখে মনে হচ্ছে আপনি <li> ট্যাগে প্যাডিং ব্যবহার করে ব্যবধানকে কিছুটা নিয়ন্ত্রণ করতে পারেন (কিছুটা)।

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

ক্যাচটি হ'ল এটি আপনার চূড়ান্ত উদাহরণের মতো স্নাগ করার উপায় বলে মনে হচ্ছে না।

এর জন্য আপনি তালিকা-স্টাইলের ধরণটি বন্ধ করে & বুল ব্যবহার করে দেখতে পারেন;

<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>।