সিএসএসে তালিকা-আইটেমের বুলেট হিসাবে ইউনিকোড চরিত্র

Question

আমার ব্যবহার করতে হবে, উদাহরণস্বরূপ, তারকা-প্রতীক (★) তালিকা-আইটেমের বুলেট হিসাবে।

আমি CSS3 মডিউলটি পড়েছি : তালিকাগুলি বর্ণনা করে যে কীভাবে বুলেট হিসাবে কাস্টম পাঠ্য ব্যবহার করতে হয়, তবে এটি আমার পক্ষে কাজ করে না। আমি মনে করি, ব্রাউজারগুলি কেবল ::markerছদ্ম উপাদানটিকে সমর্থন করে না ।

আমি ছবিগুলি ব্যবহার না করে কীভাবে এটি করতে পারি?

Comments

আপনি যে কোডটি ব্যবহার করছেন তা কি স্থাপন করতে পারবেন? এবং আপনি কোন ব্রাউজারটি এটি পরীক্ষা করছেন?

— জনি হেইনেস

stackoverflow.com/questions/3068199/… এর কিছু ইউনিকোড বুলেট রয়েছে। উবুন্টুতে ঠিক আছে তবুও আপনার উপরে থাকা তারকা চিহ্নটি বা আমার উইন্ডোজ মেশিনে 26 ক (মিডিয়াম ব্ল্যাক সার্কেল) প্রদর্শিত হবে না।

— পিট কির্খাম

এই উত্তরটি (অনুরূপ প্রশ্নের কাছে) এটি আমার জন্য সমাধান হয়েছে: stackoverflow.com/a/12216973/907575

— পাইটর মিগডাল

Answer 1

সম্পাদনা

আমি সম্ভবত আর ছবি ব্যবহার করার পরামর্শ দেব না। আমি এইভাবে একটি ইউনিকোড চরিত্র ব্যবহার করার পদ্ধতিকে আঁকড়ে ধরতাম:

li:before {
  content: "\2605";
}

পুরানো উত্তর

আমি সম্ভবত কোনও চিত্রের পটভূমিতে যেতে চাই, তারা অনেক বেশি দক্ষ বহুমুখী এবং ক্রস-ব্রাউজার-বান্ধব।

এখানে একটি উদাহরণ:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

Comments

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

— ম্যাথিয়াস বাইনেস

আপনি ঠিক বলেছেন, সম্ভবত "দক্ষ" শব্দটি যদি আপনি পারফরম্যান্সের সন্ধান করেন তবে আমার ব্যবহার করা উচিত ছিল না, তবে চিত্রের ব্যাকগ্রাউন্ড ব্যবহার করা অবশ্যই টেক্সট ব্যবহারের চেয়ে অনেক বেশি বহুমুখী।

— agbb

কোনও চিত্রের আকার পরিবর্তন করা খুব ভাল নয়, তবে একটি চরিত্র প্রতিটি আকারে নিখুঁত, তাই আমি বলব একটি চরিত্র আরও বহুমুখী: পিআই মনে করেন ব্যাকওয়ার্ড-সামঞ্জস্যপূর্ণ বা ব্রাউজার সমর্থনের বিস্তৃত পরিসীমা সহ এই শব্দটি হবে ...

— জাস্টগোশা

<li>পাঠ্য মোড়ানো হয়ে গেলে এটি ভালভাবে কাজ করে না : বুলেটটি বিনা বাক্সে থেকে যায় না এবং পাঠ্যের অনুচ্ছেদের সূচনার মতো দেখতে শেষ হয়। এই উত্তরটি এই সমস্যার সমাধান করে: stackoverflow.com/a/14301918/1450294

— মাইকেল শ্যাপার

Answer 2

বুলেট হিসাবে পাঠ্য ব্যবহার করা

ব্যবহারের li:beforeএকটি পলান হেক্স এইচটিএমএল সত্তা (বা কোনো প্লেইন টেক্সট) সঙ্গে।

---

উদাহরণ

আমার উদাহরণটি বুলেট হিসাবে চেক চিহ্ন সহ তালিকাগুলি তৈরি করবে।

সিএসএস :

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

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

---

ব্রাউজার সামঞ্জস্য

নিজে পরীক্ষা করা হয়নি, তবে এটি IE8 হিসাবে সমর্থন করা উচিত। কমপক্ষে কমপক্ষে এবং সিএসএস-কৌশলগুলি এটাই বলে।

আপনি পুরানো / ধীর সমাধান যেমন চিত্র বা স্ক্রিপ্টগুলি প্রয়োগ করতে শর্তযুক্ত মন্তব্য ব্যবহার করতে পারেন। আরও ভাল, <noscript>ইমেজগুলির জন্য উভয় ব্যবহার করুন ।

এইচটিএমএল :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

---

ব্যাকগ্রাউন্ড চিত্র সম্পর্কে

পটভূমি চিত্রগুলি হ্যান্ডেল করা সত্যই সহজ, তবে ...

1. এর জন্য ব্রাউজার সমর্থনটি background-sizeকেবলমাত্র আইই 9 হিসাবে।
2. এইচটিএমএল পাঠ্যের রঙ এবং বিশেষ ( ক্রেজি ) ফন্টগুলি কম HTTP অনুরোধ সহ অনেক কিছু করতে পারে।
3. একটি স্ক্রিপ্ট সমাধান কেবল HTML সত্তা ইনজেক্ট করতে পারে এবং একই সিএসএসকে কাজ করতে দেয়।
4. একটি ভাল রিসেট সিএসএস কোড list-style(আরও লজিক্যাল পছন্দ) আরও সহজ করে তুলতে পারে।

---

উপভোগ করুন।

Comments

বিশেষ অক্ষর পলায়নের জন্য দরকারী কনভার্সন টুল rishida.net/tools/conversion

— IIz

যদি liউপাদানটির বিষয়বস্তু একাধিক লাইনে আবৃত হয় তবে এটি সঠিকভাবে কাজ করে না ; এই মোড়ানো লাইন সঠিকভাবে যুক্ত করা হবে না।

— রিচার্ড ইভ

float: left; margin-left: -12px;অন: এর যত্ন নেওয়ার আগে, @ রিচার্ড এভারেট

— ডুডো

আমি এক লাইনের জন্য কাজ করি তবে বেশ কয়েকটি লাইন মোড়ানো থাকলে কাজ করে না।

— ভিডিআরারিকাউ

কেবল একক-লাইন তালিকা-আইটেমগুলির জন্য কাজ করে। মাল্টি-লাইনগুলি ইনডেন্টিংয়ের চেয়ে বুলেটের নীচে নেমে যাবে।

— বেলারুশ ডিগনাস

Answer 3

আপনি এটি নির্মাণ করতে পারেন:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

Comments

এটি একটি দুর্দান্ত কৌশল কারণ আপনি যদি চরিত্রটির নিখুঁত অবস্থানটি না করেন, তবে আপনার "বুলেট" বাকী তালিকার আইটেমের সাথে ইনলাইন হওয়া শেষ হবে। এটি অত্যন্ত আন-বুলেট-জাতীয় আচরণ। সুতরাং এই ফিক্সটি সহ, আপনি সাধারণ বুলেট দিয়েছিলেন ঠিক তেমনভাবে তালিকার আইটেমের বাম দিকে "বুলেট" পেয়ে যাবেন।

— সাধারণ রেডনেক

এই জন্য আপনাকে ধন্যবাদ! আমার বুলেটগুলি আবার আচরণ করতে আমার ঠিক কী প্রয়োজন ছিল।

— টুবগ্যু 50035

এটি ব্যবহার করে একটি দুর্দান্ত নেভিগেশন ট্রি তৈরি করে '\21B3'! ধন্যবাদ! এটি এখানে অন্যান্য উত্তরগুলির চেয়ে ভাল কাজ করেছে। এছাড়াও পরিবর্তিত padding-leftকরা আমার নকশা 1em, যা ভাল আত্তীকরণ আপনার গাছ মাত্রা পরিবর্তন যখন মাপ।

— এনডিএম 13

Answer 4

এটি ডাব্লু 3 সি সমাধান। আপনি 3012 এ এটি ব্যবহার করতে পারেন!

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

Comments

আমি শুনেছি 3012-এ, ইন্টারনেট এক্সপ্লোরার অবশেষে কাজ করে!

— কে কে কোয়ান

এটি ফায়ারফক্স 48 এ কাজ করে তবে ক্রোমিয়াম 51 বা আমার ফোন / ট্যাবলেটে নয়। অন li:beforeসমাধান ব্যবহার করতে হবে ।

— কোডারগুই 123

কাজ করে। ভবিষ্যতে স্বাগতম, মহিলা এবং ভদ্রলোক।

— মিক্কো ওহতামা

Answer 5

চিত্রগুলি সুপারিশ করা হয় না কারণ সেগুলি কিছু ডিভাইসে (রেটিনা ডিসপ্লে সহ অ্যাপল ডিভাইসগুলি) বা জুম ইন করা অবস্থায় পিক্সেলটেড প্রদর্শিত হতে পারে a একটি চরিত্রের সাথে, আপনার তালিকাটি সর্বদা দুর্দান্ত দেখায়।

আমি এখনও অবধি খুঁজে পাওয়া সেরা সমাধান এখানে। এটি দুর্দান্ত কাজ করে এবং এটি ক্রস ব্রাউজার (IE 8+)।

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

গুরুত্বপূর্ণ জিনিসটি হ'ল একটি স্থির প্রস্থ সহ ভাসমান ব্লকে অক্ষরটি রাখা যাতে পাঠ্যটি একক লাইনে ফিট করার জন্য খুব বেশি দীর্ঘ হয় তবে প্রান্তিককরণ হয়। 1.2 মিমি আপনি আপনার অক্ষরের জন্য প্রস্থটি চান, এটি আপনার প্রয়োজনের জন্য এটি পরিবর্তন করুন। উল এবং লি উপাদানগুলির জন্য প্যাডিং এবং মার্জিন পুনরায় সেট করতে ভুলবেন না।

সম্পাদনা: সচেতন থাকুন যে আগে আপনি উল এবং লি: এ আলাদা ফন্ট ব্যবহার করলে "1.2 মিমি" আকারটি ভিন্ন হতে পারে। এটি পিক্সেল ব্যবহার করা নিরাপদ।

Comments

সম্ভবত "উচ্চতা: 1px" বা লি এর অনুরূপ: এর আগে? এটি নিশ্চিত করে যে ভাসাটি পরবর্তী <li> না বাড়িয়ে অবাঞ্ছিত বাসা বাঁধে।

— এ্যালান ডি স্মেট

প্রদর্শন কেন: ব্লক; অন ​​লি: আগে? এটি কি কারণ ডিফল্টরূপে এর ইনলাইন এবং আপনি কোনও প্রস্থ নির্দিষ্ট করতে পারবেন না?

— আলেকজান্ডার সোনোনিক

Answer 6

তারকা যুক্ত করতে ইউনিকোড অক্ষর ব্যবহার করুন 22C6।

আমি liএবং তারাটির মধ্যে কিছুটা ফাঁক করার জন্য একটি স্থান যুক্ত করেছি । স্থানের কোডটি A0।

li:before {
    content: '\22C6\A0';
}

Answer 7

222 এর উত্তরের আরও একটি সম্পূর্ণ উদাহরণ :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

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

ফায়ারফক্স, ক্রোম, সাফারি এবং আই 8-10-তে পরীক্ষা করা হয়েছে এবং সবগুলিতে সঠিকভাবে রেন্ডার করে।

Comments

text-indent: -1em;আপনার যদি মাল্টি-লাইন তালিকা আইটেম থাকে তবে এটি একটি গুরুত্বপূর্ণ সম্পত্তি। এটি ছাড়া দ্বিতীয় এবং পরবর্তী লাইনগুলি পূর্বের লাইনের চেয়ে বুলেটের সাথে সরে যায়।

— আন্দ্রেস

Answer 8

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

Answer 9

আমি এই পুরো তালিকার মধ্য দিয়ে এসেছি এবং ২০২০ সালের মধ্যে আংশিকভাবে সঠিক এবং আংশিকভাবে ভুল উপাদান রয়েছে।

আমি দেখতে পেলাম যে ইউটিএফ -8 ব্যবহার করার সময় ইনডেন্ট এবং অফসেট সবচেয়ে বড় সমস্যা ছিল, তাই আমি এটি আমার উদাহরণ হিসাবে "খাড়া ত্রিভুজ" বুলেট ব্যবহার করে 2020 এর সামঞ্জস্যপূর্ণ CSS সমাধান হিসাবে পোস্ট করছি।

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

emহরফ আকারের সাথে দ্বন্দ্ব এড়ানোর জন্য ইউনিট হিসাবে ব্যবহার করুন

Answer 10

এই কোডটি ব্যবহার করে দেখুন ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

Answer 11

এই বিষয়টি পুরানো হতে পারে তবে এখানে দ্রুত সমাধান ul {list-style:outside none square;}বা ul {list-style:outside none disc;}ইত্যাদি ...

তারপরে তালিকার তালিকায় বাম প্যাডিং যুক্ত করুন

ul li{line-height: 1.4;padding-bottom: 6px;}