এইচটিএমএল তালিকা-স্টাইল-টাইপ ড্যাশ

Question

এইচটিএমএলে কোনও ড্যাশ (যেমন - বা - –বা - —) অর্থাত্ একটি তালিকা-শৈলী তৈরি করার কোনও উপায় আছে কি?

<ul>
  <li>abc</li>
</ul>

outputting:

- abc

আমার কাছে এমন কিছু করার মতো ঘটনা ঘটেছে li:before { content: "-" };, যদিও আমি সেই বিকল্পটি জানি না (এবং প্রতিক্রিয়ার জন্য অনেকটা বাধ্য)।

আরও সাধারণভাবে, তালিকার আইটেমগুলির জন্য জেনেরিক অক্ষরগুলি কীভাবে ব্যবহার করতে হয় তা জানার বিষয়ে আমি আপত্তি করব না।

Comments

যেহেতু তালিকায় ড্যাশ সাধারণত ব্যবহৃত হয় কেন এটি সিএসএসে ডিফল্টরূপে অন্তর্ভুক্ত করা হয়নি?

— টেমিরবেক

আরও গুরুত্বপূর্ণ বিষয়, কেন এখানে আঞ্চলিক সংখ্যা এবং কাটাকানা ... তবে ড্যাশ নয়?

— হেনরি সি

Answer 1

আপনি এটি ব্যবহার করতে :beforeএবং content:মনে রাখবেন যে এটি আই 7 বা নীচে সমর্থিত নয়। যদি আপনি এটির সাথে ঠিক থাকেন তবে এটি আপনার সেরা সমাধান। দেখুন আমি ব্যবহার করতে পারেন বা QuirksMode সম্পূর্ণ বিবরণের জন্য CSS সামঞ্জস্য টেবিল।

বুড়ো পয়েন্টের জন্য কোনও চিত্র ব্যবহার করা এবং কেবল চিত্রটিকে একটি ড্যাশের মতো দেখানো করা, এটি পুরানো ব্রাউজারগুলিতে কাজ করা উচিত slightly উদাহরণস্বরূপ ডাব্লু 3 সি list-style-imageপৃষ্ঠা দেখুন ।

Comments

সমস্যাটি :beforeহ'ল তালিকার আইটেমগুলি বেশ কয়েকটি লাইন ছড়িয়ে দিলে ২ য় লাইনের ইনডেন্টটি ড্যাশ যেখানে থাকে সেখানে শুরু হয়, সুতরাং তালিকাভুক্ত তালিকাটির প্রভাবটি নষ্ট করে দেয়। এটি এড়াতে আপনার ঝুলন্ত ইন্ডেন্টগুলি ব্যবহার করতে হবে। এটি দেখুন: alistapart.com/articles/taminglists

— chiborg

মধ্যে mdash; স্থাপন করতে contentব্যবহারcontent: "\2014\a0"

— ইভান জেড

@ থ্রি এর উত্তর দেখুন, যা আরও সাধারণ এবং কম ভার্বোস!

— বেন ভার্টনঝেন

Answer 2

:beforeসিউডো ক্লাসের সাথে ইনডেন্টড লিস্টের প্রভাব রাখার জন্য একটি সহজ ফিক্স (টেক্সট-ইনডেন্ট) রয়েছে ।

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Comments

কাজ করে, তবে উপাদানটিতে list-style-type: none;রাখতে ভুলবেন না <ul>।

— toesslab

খালি ইন্ডেন্টেশন ছাড়াইul li:before{ content:"- ";}

— ক্লেম্যাক্স

আমি এটিকে যুক্ত display: block; float: left;করতে পছন্দ করি li:beforeযা এটি সহজেই সামগ্রী প্রবাহের বাইরে টানতে পারে, অন্যথায় এটি প্রথম এবং পরবর্তী লাইনগুলি সঠিকভাবে রেখাযুক্ত করা বেশ শক্ত / বগী। বা কেয়ান ঝাং এর উত্তরও এটি পরম অবস্থানের সাথে করে with

— সাইমন পূর্ব

সুন্দর বোবা যা list-style-type dashইতিমধ্যে CSS এর অংশ নয়

— পিক্সেলোমো

এইচটিএমএল-কেবলমাত্র আপনার প্রস্তাবিতের মতো সমাধান কী হবে?

— প্লুটন

Answer 3

এখানে কোনও অবস্থান আপেক্ষিক বা নিখুঁত এবং পাঠ্য-ইনডেন্ট ছাড়াই সংস্করণ রয়েছে:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

উপভোগ করুন;)

Comments

মহান! আমি 'উল.ড্যাশ> লি: এর আগে' পরামর্শ দেব। অন্যথায় অভ্যন্তরীণ উলগুলি গণ্ডগোল হয়ে যায়।

— w.stoettinger

আমি এটিকে যুক্ত display: block; float: left;করতে পছন্দ করি li:beforeযা এটি সহজেই সামগ্রী প্রবাহের বাইরে টানতে পারে, অন্যথায় এটি প্রথম এবং পরবর্তী লাইনগুলি সঠিকভাবে রেখাযুক্ত করা বেশ শক্ত / বগী। বা কেয়ান ঝাং এর উত্তরও এটি পরম অবস্থানের সাথে করে with

— শিমোন পূর্ব

আমি এটিকে নেভিগেশন .activeক্লাস হিসাবে ব্যবহার করি li:before { visibility: hidden; }এবং এর সাথেli.active:before { visibility: visible; }

— ই

সেরা পরামর্শ ইমো!

— বেন ভার্টনঝেন

Answer 4

এটা ব্যবহার কর:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Comments

দুর্ভাগ্যক্রমে, এটি CSS টেক্সটের রঙগুলিকে সম্মান করে না।

— হেরেবলুর

ইমেলগুলির একমাত্র সম্ভাব্য সমাধান

— ওলেগ

এটি এখন Gmail (নভেম্বর 2018) এবং আউটলুক 2016 উভয়ের জন্য কাজ করছে না।

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

Answer 5

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

ডেমো ভাজা

Answer 6

আমার নিজের সংস্করণটিও যুক্ত করতে দিন, বেশিরভাগ ক্ষেত্রে আমার নিজের পছন্দের সমাধানটি আবার খুঁজে বার করতে:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

https://codepen.io/burningTyger/pen/dNzgrQ

Comments

আইএমএইচও এটি এখন পর্যন্ত সেরা সমাধান। ভাগ করে নেওয়ার জন্য!

— অ্যাক্সেল

Answer 7

আমার ক্ষেত্রে এই কোডটি সিএসএসে যুক্ত করুন

ul {
    list-style-type: '- ';
}

যথেষ্ট ছিল। এটি যেমন সহজ।

Comments

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

— এহস্ট্রো

এটি কেবলমাত্র ডেস্কটপ ফায়ারফক্সে সমর্থিত বলে মনে হচ্ছে: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

— dave

এটি এখন ক্রোমেও সমর্থিত ( believe৯ হিসাবে আমি বিশ্বাস করি): chromestatus.com/feature/5893875400966144 এবং caniuse.com/#feat=mdn-css_properties_list-style-type_string

— অ্যালেক্স

Answer 8

শীর্ষস্থানীয় উত্তরগুলির মধ্যে একটি আমার পক্ষে কাজ করে নি, কারণ, কিছুটা পরীক্ষার পরে এবং ত্রুটির পরে, লি: এর আগে সিএসএস নিয়ম প্রদর্শনের দরকার ছিল: ইনলাইন-ব্লক।

সুতরাং এটি আমার জন্য একটি সম্পূর্ণ কার্যকারী উত্তর:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

Comments

এটি কম / SASS তে লেখা আছে।

— আরসলান আমির

Answer 9

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

Comments

সম্ভবত `` `উল {মার্জিন: 0; তালিকা-শৈলী-প্রকার: কিছুই নয়; li উল লি: এর আগে {সামগ্রী: "-";} `` `অন্যথায় এটি ওল তালিকাগুলিকেও প্রভাবিত করে

— সাশা বন্ড

Answer 10

এখানে আমার ফিডাল সংস্করণ:

(Modernizr) বর্গ .generatedcontentউপর <html>কার্যত IE8 + এবং প্রত্যেক অন্যান্য বিবেকী ব্রাউজার মানে।

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

সিএসএস:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

Answer 11

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

আমি কখনই ব্যবহার করার চেষ্টা করিনি: আগে আপনার মতো পথে, যদিও এটি কার্যকর হতে পারে। খারাপ দিকটি এটি কিছু পুরানো ব্রাউজার দ্বারা সমর্থিত হবে না। আমার অন্ত্রের প্রতিক্রিয়া হ'ল এটি বিবেচনার জন্য এখনও যথেষ্ট গুরুত্বপূর্ণ। ভবিষ্যতে, এটি এতটা গুরুত্বপূর্ণ নাও হতে পারে।

সম্পাদনা: আমি ওপির পদ্ধতির সাথে কিছুটা পরীক্ষা করেছি। আইই 8-তে, আমি কাজ করার কৌশলটি পাইনি, সুতরাং এটি অবশ্যই ক্রস-ব্রাউজার নয়। তদুপরি, ফায়ারফক্স এবং ক্রোমে, তালিকা-স্টাইল-টাইপের সাথে সংযুক্ত নয় এমন কোনওটিকে সেট করা উপেক্ষা করা হবে বলে মনে হয়।

Answer 12

আমার সমাধানটি এতে এমড্যাশের সাথে অতিরিক্ত স্প্যান ট্যাগ যুক্ত করতে হয়:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

এবং সিএসএসে যুক্ত:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

Answer 13

অন্য উপায়:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

Answer 14

সিএসএস:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

এইচটিএমএল:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Comments

এটি এক আইনের চেয়ে বেশি লাইনের আইটেমগুলির জন্য কাজ করে না

— জেনেল্যাম্পটন

Answer 15

পরিবর্তে লু লি ব্যবহার করার জন্য, ব্যবহৃত dl (definition list) and dd। <dd>স্ট্যান্ডার্ড সিএসএস স্টাইল ব্যবহার করে সংজ্ঞায়িত করা যেতে পারে {color:blue;font-size:1em;}এবং এইচটিএমএল ট্যাগের পরে আপনি যেই চিহ্ন রাখুন তা হিসাবে চিহ্নিতকারী হিসাবে ব্যবহার করতে পারেন। এটি উল লি এর মতো কাজ করে তবে আপনাকে যে কোনও প্রতীক ব্যবহারের অনুমতি দেয়, সাধারণত আপনি যে ইন্ডেন্টেড তালিকার প্রভাব পাবেন তা পেতে আপনাকে কেবল এটিকে ইন্ডেন্ট করতে হবে ul li।

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

আপনাকে অনেক ক্লিনার কোড দেয়! এইভাবে, আপনি চিহ্নিতকারী হিসাবে কোনও ধরণের অক্ষর ব্যবহার করতে পারেন! ইনডেন্ট প্রায় -10pxএবং এটি নিখুঁত কাজ করে!

Comments

এটি দুটি কারণে বেশ খারাপ। প্রথমত, আপনি সামগ্রী এবং শৈলীর মিশ্রণে আপনার বুলেট অক্ষরগুলি সরাসরি পাঠ্যে রেখে দিচ্ছেন। দ্বিতীয়ত, আপনি dl উপাদানটির অপব্যবহার করছেন, এখানে সঠিক ব্যবহারের জন্য একটি নিবন্ধ ।

— mzgajner

Answer 16

আজ যে কারও কাছে এই সমস্যা রয়েছে তার জন্য সমাধানটি কেবল সহজ:

তালিকা-শৈলী: "-"

Answer 17

আমার জন্য যা কাজ ছিল তা ছিল

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>