<ul> উপাদানের জন্য <li> উপাদানগুলির জন্য কাস্টম বুলেট প্রতীক এটি একটি নিয়মিত অক্ষর, এবং কোনও চিত্র নয়

125

আমি বুঝতে পেরেছি যে কেউ সিএসএস অ্যাট্রিবিউট ব্যবহার করে একটি প্রতিস্থাপন বুলেট চরিত্র হিসাবে একটি কাস্টম গ্রাফিক নির্দিষ্ট করতে পারে:

list-style-image

এবং তারপরে এটি একটি ইউআরএল দিচ্ছে।

তবে, আমার ক্ষেত্রে, আমি কেবল '+' চিহ্ন ব্যবহার করতে চাই। আমি এটির জন্য কোনও গ্রাফিক তৈরি করতে চাই না এবং তারপরে এটি নির্দেশ করব। আমি বরং অর্ডারযুক্ত তালিকার বুলেট প্রতীক হিসাবে প্লাস প্রতীক হিসাবে ব্যবহার করার নির্দেশ দিয়েছি।

এটি করা যেতে পারে বা আমি কি প্রথমে এটিকে একটি গ্রাফিক বানাতে বাধ্য?

— idStar
সূত্র

81

টেমিং তালিকাগুলি থেকে নিম্নলিখিতটি উদ্ধৃত হয়েছে :

আপনার তালিকাগুলির সময় থাকতে পারে তবে আপনি কোনও বুলেট চান না, বা বুলেটটির জায়গায় আপনি অন্য কোনও চরিত্র ব্যবহার করতে চান। আবার, সিএসএস একটি সরল সমাধান সরবরাহ করে। কেবল তালিকা-শৈলী যুক্ত করুন: কিছুই নয়; আপনার নিয়মে এবং এলআইগুলিকে ঝুলন্ত ইনডেন্টগুলি সহ প্রদর্শন করতে বাধ্য করুন। নিয়মটি এরকম কিছু দেখবে:
ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}
প্যাডিং বা মার্জিনটি শূন্যে সেট করা দরকার, অন্য এক সেটটি 1 মি। আপনি যে "বুলেট" চয়ন করেছেন তার উপর নির্ভর করে আপনার এই মানটি সংশোধন করতে হতে পারে। নেতিবাচক পাঠ্য-ইন্ডেন্টের ফলে প্রথম লাইনটি সেই পরিমাণে বাম দিকে সরানো হয়, একটি হ্যাংিং ইন্ডেন্ট তৈরি করে।

এইচটিএমএলটিতে আমাদের মানক ইউল থাকবে তবে তালিকার আইটেমের সামগ্রীর আগের বুলেটের পরিবর্তে আপনি যে অক্ষর বা এইচটিএমএল সত্তা ব্যবহার করতে চান তা সহ। আমাদের ক্ষেত্রে আমরা », সঠিক ডাবল কোণের উদ্ধৃতি: using ব্যবহার করব»

»আইটেম 1
» আইটেম 2
»আইটেম 3
tem আইটেম 4
» আইটেম 5 আমরা
কিছুটা দীর্ঘ করব যাতে
এটি মোড়ানো হবে

— টিজে ওয়েলথএজাইন এপিআই প্রচারক
সূত্র

1

আপনার সমাধানটি এর সাথে একত্রে কাজ করেছে: সিউডো-সিলেক্টরের আগে আপনি এবং @ টাইসন টি। উভয়ই নির্দেশ করেছেন। আমি পছন্দ করেছি যে আপনি <ul> এর বিভিন্ন বৈশিষ্ট্যগুলি বুলেট ইনডেন্টেশন অনুকরণের জন্য কনসার্টে কীভাবে কাজ করে out

— idStar

9

এইভাবে আমি এটি একসাথে রেখেছি, যা কাজ করেছে: ul {ফন্ট-আকার: 14px; লাইন-উচ্চতা: 16px; তালিকা-শৈলী: কিছুই নয়; মার্জিন-বাম: 0; প্যাডিং-বাম: 1 এম; পাঠ্য-ইনডেন্ট: -১ এমএম; } লি: এর আগে {সামগ্রী: "+"; Symbol আমাকে + চিহ্নের পরে একটি জায়গা রাখতে হয়েছিল, তবে এটি যথাযথভাবে সারিবদ্ধ বলে মনে হচ্ছে।

— idStar

6

দুর্ভাগ্যক্রমে এই পদ্ধতিতে বুলেট চিহ্নটি নির্বাচনের সাথে অন্তর্ভুক্ত হয়ে যায় যা সাধারণ বুলেটের ক্ষেত্রে নয় not

— কনরাড হাফনার

169

এটি একটি দেরিতে উত্তর, তবে আমি কেবল এটি পেরিয়ে এসেছি ... মোড়ানো যে কোনও লাইনে ইনডেন্টিং সঠিক পেতে, এইভাবে চেষ্টা করে দেখুন:

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

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

— মাইক টি
সূত্র

1

আমার জন্য, এটি পরিমাপের একক হিসাবে ch ব্যবহার করা আরও ভাল কাজ করে, বিশেষত text-indent: -2ch+ চিহ্ন এবং তার পরে স্থানটির জন্য অ্যাকাউন্টিং করতে, তারপরে padding-right: 1chসেই স্থান যুক্ত করতে। তবুও, একটি বড় +1।

— কোবল্টডাক্ক

44

অনেক সমাধান।
তবে আমি এখনও মনে করি উন্নতির আরও জায়গা আছে।

সুবিধাদি:

খুব কমপ্যাক্ট কোড
যে কোনও ফন্টের আকারের সাথে কাজ করে
(কোনও পিক্সেল মান নেই)
সারিগুলি পুরোপুরি সারিবদ্ধ করে
(প্রথম লাইন এবং নিম্নলিখিত লাইনের মধ্যে কোনও সামান্য স্থানান্তর)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}

<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

স্নিপেট প্রসারিত করুন

— Jpsy
সূত্র

2

এটি খুব ভাল

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

1

এটি আমার মতে আরও ভাল উত্তর কারণ এটি আপনাকে কীভাবে অন্যান্য বিশদটিও কাস্টমাইজ করতে পারে তা নির্দেশ করে। এবং এটিতে "রান কোড স্নিপেট" সংযুক্ত রয়েছে!

— আয়নু সিউটা

1

এই উত্তর হওয়া উচিত। পরিষ্কার এবং সহজ

— এভিলডিআর

1

আমি একটি ইমেজ ব্যবহার করে সমাধানের সন্ধান করছিলাম এবং প্রচুর উত্তর চেষ্টা করেছি, তবে এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে! আমি content: url('link-to-my-asset.svg');বুলেট এবং সামগ্রীর মধ্যে চিত্রের প্রস্থ এবং প্যাডিং ব্যবহার করতে এবং সেট করতে সক্ষম হয়েছি । ধন্যবাদ!

— অ্যানিপি

এটি একটি ভাল উত্তর। তবে, আমার এমন একটি সমাধানের প্রয়োজন ছিল যা কলাম-

— গণনাও

29

এটি ডাব্লু 3 সি সমাধান। ফায়ারফক্স এবং ক্রোমে কাজ করে।

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

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }

  <ul><li>item</li></ul>

স্নিপেট প্রসারিত করুন

— PHPst
সূত্র

2

যদিও মনে হয় Firefox এর বর্তমান সংস্করণে কাজ, ফলে অত্যন্ত কুৎসিত: কাস্টম বুলেট ডান টেক্সট বিষয়বস্তু (এটি snapping) সামনে স্থাপন করা হয়, প্রায় হিসাবে যদি li:before {content:"…";}অন্য কোন খাঁজ এবং সজ্জায় ছাড়া ব্যবহার করা হয়েছিল।

— আন্তন স্যামসনভ

19

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

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

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

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

— NicolasBernier
সূত্র

এটি সহজেই আমি খুঁজে পেয়েছি সেরা সমাধান।

— চার্লস রোপার

floatআবার ব্যবহার কি? ... নাহ।

10

আপনি :beforeতালিকা আইটেমের সামনে সামগ্রী toোকাতে সিউডো-নির্বাচক ব্যবহার করতে পারেন । আপনি কুইর্কসোডে একটি উদাহরণ খুঁজে পেতে পারেন, http://www.quirksmode.org/css/before after.html এ । আমি এটি ব্লককোটিসের চারপাশে দৈত্য উদ্ধৃতি সন্নিবেশ করতে ব্যবহার করি ...

আছে HTH।

— টাইসন টি।
সূত্র

10

আমার সমাধানটি মোড়ানো লাইনগুলিকে স্বয়ংক্রিয়ভাবে সঠিকভাবে রেখাযুক্ত করতে অবস্থান ব্যবহার করে। সুতরাং আপনাকে আগে লি: প্যাডিং-ডান সেট করার বিষয়ে চিন্তা করতে হবে না।

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

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

স্নিপেট প্রসারিত করুন

— user648519
সূত্র

8

এটি স্টাইলিংকে যোগ্য করে তোলার পরামর্শ দেওয়া হয় <li>যাতে এটি <ol>তালিকা আইটেমগুলিকে প্রভাবিত করে না । তাই:

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

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

— silverliebt
সূত্র

8

ফন্ট-অসাধারণ বাক্সের বাইরে দুর্দান্ত সমাধান সরবরাহ করে:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

স্নিপেট প্রসারিত করুন

— sdw
সূত্র

4

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}

<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

স্নিপেট প্রসারিত করুন

— দোলক
সূত্র

আপ / ঠিক এইচটিএমএল থেকে একটি বুলেট ব্রাউজারে

— সিএসএসে

2

এম ড্যাশ স্টাইল:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

— dmartinezfernandez
সূত্র

1

আমি নেতিবাচক মার্জিন ব্যবহার করতে পছন্দ করি, আপনাকে আরও নিয়ন্ত্রণ দেয়

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

— জন ম্যাগনোলিয়া
সূত্র

1

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

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

স্নিপেট প্রসারিত করুন

এর এই সুবিধাগুলি রয়েছে (অন্যান্য সমাধানের তুলনায়):

আপনি উদাহরণটিতে যেমন দেখতে পান এটি প্রতীক প্রস্থের উপর নির্ভর করে না । আমি দুটি অক্ষর ব্যবহার করে দেখিয়েছি এটি প্রশস্ত বুলেট দিয়েও কাজ করে। আপনি যদি অন্য সমাধানগুলিতে এটি চেষ্টা করে দেখেন তবে আপনি পাঠ্যকে ভুলভাবে স্বাক্ষরিত করে (বাস্তবে এটি উচ্চতর জুমগুলিতে * প্রতীক দিয়েও দৃশ্যমান)।
এটি আপনাকে বুলেট দ্বারা ব্যবহৃত স্থানের সম্পূর্ণ নিয়ন্ত্রণ দেয় । আপনি 30px যেকোনো কিছু দ্বারা প্রতিস্থাপন করতে পারেন (এমনকি 1 এম ইত্যাদি) কেবল তিনটি জায়গায় এটি পরিবর্তন করতে ভুলবেন না।
যদি আপনাকে বুলেটের অবস্থানের সম্পূর্ণ নিয়ন্ত্রণ দেয় । text-align: center;আপনার পছন্দ অনুসারে যেকোনো কিছু দ্বারা প্রতিস্থাপন করুন । উদাহরণস্বরূপ আপনি চেষ্টা করতে পারেন color: red; text-align: right; padding-right: 5px; box-sizing: border-box; বা আপনি যদি বর্ডার-বাক্সের সাথে খেলতে পছন্দ না করেন তবে কেবল প্যাডিং (5px) প্রস্থ থেকে বিয়োগ করুন (উদাহরণস্বরূপ প্রস্থ: 25px)। বিকল্প প্রচুর আছে।
এটি ফ্লোট ব্যবহার করে না তাই এটি যে কোনও জায়গায় থাকতে পারে।

উপভোগ করুন।

— Gorn
সূত্র

1

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}

<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>

স্নিপেট প্রসারিত করুন

— বিরাজ গিরি
সূত্র

আপনাকে ধন্যবাদ - এটি খুব পরিষ্কার এবং আমি এটি সম্পর্কে ভুলে গেছি !important, যা ব্লগস্পটে আমার কাস্টম সিএসএসকে কাজ

— করাতে জরুরী ছিল

-2

এটা চেষ্টা কর

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>

স্নিপেট প্রসারিত করুন

— ভেঙ্কট
সূত্র