আমার কোনও বুলেট ছাড়াই একটি নিরক্ষিত তালিকা দরকার

Question

আমি একটি আনর্ডারড তালিকা তৈরি করেছি। আমি মনে করি নিরক্ষিত তালিকার বুলেটগুলি বিরক্তিকর, তাই আমি সেগুলি সরাতে চাই।

বুলেট ছাড়াই কি কোনও তালিকা পাওয়া সম্ভব?

Answer 1

আপনি সেট করে বুলেট অপসারণ করতে পারেন list-style-typeথেকে none(সাধারণত একটি পিতা বা মাতা উপাদান জন্য CSS উপর <ul>,) উদাহরণস্বরূপ:

ul {
  list-style-type: none;
}

এছাড়াও আপনি জুড়তে চাইতে পারেন padding: 0এবং margin: 0যে আপনার পাশাপাশি খাঁজ সরাতে চান পারেন।

তালিকার বিন্যাসকরণের কৌশলগুলির দুর্দান্ত হাঁটার জন্য তালিকাটি দেখুন utorial

Comments

@ টোভমেড আমার আই 9 (উইন 7 এ) তে কাজ করার জন্য মনে হয়েছে। (এটি একটি জটিল পৃষ্ঠা, একটি সাধারণ পোকা নয়, সম্ভবত অন্য কিছু আচরণ পরিবর্তন করেছে)

— ডেভিড বালেক

আপনি যদি আমার মতো হয়ে থাকেন এবং কীভাবে ইনডেন্টটি

— কুণাল

ওহ, আমি কপি / পেস্টের জন্য এখানে কতবার ফিরে এসেছি :)

— জোনাথন।

প্যাডিং এবং মার্জিনগুলিতে দুর্দান্ত স্পর্শ

— এভেজেনি ক্লিপিলিন

Answer 2

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে এটির "স্টাইলহীন" শ্রেণি রয়েছে:

তালিকার আইটেমগুলিতে ডিফল্ট তালিকা-শৈলী এবং বাম প্যাডিং সরান (কেবলমাত্র তাত্ক্ষণিক শিশুরা)।

বুটস্ট্র্যাপ 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

বুটস্ট্র্যাপ 3 এবং 4:

<ul class="list-unstyled">
   <li>...</li>
</ul>

বুটস্ট্র্যাপ 3: http://getbootstrap.com/css/#type-lists

বুটস্ট্র্যাপ 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

Comments

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

— পিজে ব্রুনেট

আসলে, এই উত্তরটি ঠিক আমি যা খুঁজছিলাম is এবং বুটস্ট্র্যাপ পুরো ইন্টারনেটের 3.6% দ্বারা ব্যবহৃত হয়, তাই এটি হ্রাস পাচ্ছে না। ট্রেন্ডস.বিল্টভিথ.com/ডোকিনফো / টিউটার- বুটস্ট্র্যাপ একটি দ্রুত গুগল অনুসন্ধান প্রকাশ করে যে বুটস্ট্র্যাপ ধারাবাহিকভাবে "সর্বাধিক জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক" বিভাগে স্থাপন করা হয়েছে।

— বোবার্ট

Answer 3

আপনার ব্যবহার করা দরকার list-style: none;

<ul style="list-style: none;">
    <li>...</li>
</ul>

Comments

ইনলাইন সিএসএস ফাইলগুলিতে সিএসএসকে ওভারলুল করে দেয় সে বিষয়ে সচেতন থাকুন। অ্যাপ্লিকেশন / বিকাশের অনুশীলনের উপর নির্ভর করে এটি সত্যই বিরক্তিকর হতে পারে।

— মার্ক বাইজেন্স

Answer 4

সিএসএসে, স্টাইল,

list-style-type: none;

Comments

এই উত্তরটি শীর্ষস্থানীয় হিসাবে একই মুহুর্তে দেওয়া হয়েছিল, তার মানে এই নয় যে এটি এখানে থাকা উচিত এবং পাঠকরা কয়েক সেকেন্ডের অপচয় না করে যতক্ষণ না তারা বুঝতে পারে যে এটি একটি ডুপ। প্লাস! এই (উত্তর) ভাগ্যবান অবস্থানে উত্তর মুছে ফেলার জন্য এসও একটি বিশেষ ব্যাজ সরবরাহ করে ।

— ড্যান ড্যাসক্লেস্কু

Answer 5

আপনাকে <ul>নীচের মতো উপাদানগুলিতে একটি শৈলী যুক্ত করতে হবে :

<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>

এটি বুলেটগুলি সরিয়ে ফেলবে। আপনি আগের উত্তরগুলির উদাহরণগুলির মতো স্টাইলশীটে সিএসএস যুক্ত করতে পারেন।

Answer 6

সিএসএসে ...

ul {
   list-style: none;
}

Comments

এই উত্তরটি শীর্ষস্থানীয় হিসাবে একই মুহুর্তে দেওয়া হয়েছিল, তার মানে এই নয় যে এটি এখানে থাকা উচিত এবং পাঠকরা কয়েক সেকেন্ডের অপচয় না করে যতক্ষণ না তারা বুঝতে পারে যে এটি একটি ডুপ। প্লাস! এই (উত্তর) ভাগ্যবান অবস্থানে উত্তর মুছে ফেলার জন্য এসও একটি বিশেষ ব্যাজ সরবরাহ করে ।

— ড্যান ড্যাসক্লেস্কু

Answer 7

পূর্ববর্তী উত্তরের ছোট পরিমার্জন: অতিরিক্ত স্ক্রিন লাইনে ছড়িয়ে পড়লে লম্বা লাইনগুলিকে আরও পঠনযোগ্য করে তুলতে:

ul, li {list-style-type: none;}

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

Comments

ওয়ার্কস, তবে কেবল

— আই 8 এর

এটি list-style-type: none;উভয় ulএবং এর উপর রাখা অপ্রয়োজনীয় li। আপনি শুধু একটি করতে পারেন।

— mfluehr

Answer 8

নিম্নলিখিত সিএসএস ব্যবহার করুন:

ul {
  list-style-type: none
}

Comments

এই উত্তরটি শীর্ষস্থানীয় হিসাবে একই মুহুর্তে দেওয়া হয়েছিল, তার মানে এই নয় যে এটি এখানে থাকা উচিত এবং পাঠকদের কয়েক সেকেন্ড নষ্ট করা উচিত যতক্ষণ না তারা বুঝতে পারে যে এটি চারটি দ্বিখের মধ্যে একটি। প্লাস! এই (উত্তর) ভাগ্যবান অবস্থানে উত্তর মুছে ফেলার জন্য এসও একটি বিশেষ ব্যাজ সরবরাহ করে ।

— ড্যান ড্যাসক্লেস্কু

Answer 9

স্থানীয়:

ul { list-style-type: none; }

বুটস্ট্র্যাপ:

<ul class="list-unstyled list-group">
    <li class="list-group-item">...</li>
</ul>

দ্রষ্টব্য: আপনি যদি তালিকা-গোষ্ঠীগুলি ব্যবহার করে থাকেন তবে তালিকা-আনস্টাইলের কোনও প্রয়োজন নেই।

Comments

এটি অর্ধ-ডজন বা এর আগে পোস্ট করা উত্তরগুলি প্রায় একই।

— টাইলার

Answer 10

আপনি এটি কাজ করতে পারে অক্ষম হন, তাহলে <ul>স্তর, আপনি স্থাপন করতে প্রয়োজন হতে পারে list-style-type: none;এ <li>স্তর:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

এই পুনরাবৃত্তি এড়াতে আপনি একটি সিএসএস ক্লাস তৈরি করতে পারেন:

<style>
ul.no-bullets li
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

প্রয়োজনে, ব্যবহার করুন !important:

<style>
ul.no-bullets li
{
    list-style-type: none !important;
}
</style>

Answer 11

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

ul.dashed-list {
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

Answer 12

আপনি নিম্নলিখিত সিএসএস ব্যবহার করে বুলেটগুলি অপসারণ করতে পারেন :

ul {
    list-style: none; //or list-style-type:none; 
}

আপনি এমনকি আপনার কাস্টম তালিকা শৈলীটি যুক্ত করতে পারেন:

li:before {
    content: '✔';
    color:red;
}

Comments

তালিকা-শৈলী এবং তালিকা-শৈলী-প্রকারের মধ্যে পার্থক্য কী, কোনওটি নয়?

— ড্যান ড্যাসক্লেস্কু

Answer 13

সিএসএস:

.liststyle {
    list-style-type: none;
}

এইচটিএমএল:

<ul class="liststyle">
    <li>Test</li>
</ul>

Comments

এটি শীর্ষস্থানীয় উত্তর হিসাবে একই, মূলত।

— ড্যান ড্যাসক্লেস্কু

Answer 14

সম্পূর্ণরূপে ulডিফল্ট শৈলী অপসারণ করতে :

    list-style-type: none;

    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;

Answer 15

আপনি যদি একা খাঁটি এইচটিএমএল দিয়ে এটি সম্পাদন করতে চেয়েছিলেন তবে এই সমাধানটি সমস্ত বড় ব্রাউজারগুলিতে কাজ করবে:

বর্ণনা তালিকা

কেবল নিম্নলিখিত HTML ব্যবহার করুন:

<dl>
  <dt>List Item 1</dt>
    <dd>Sub-Item 1.1</dd>
  <dt>List Item 2</dt>
    <dd>Sub-Item 2.1</dd>
    <dd>Sub-Item 2.2</dd>
    <dd>Sub-Item 2.3</dd>
  <dt>List Item 3</dt>
    <dd>Sub-Item 3.1</dd>
</dl>

যা নিম্নলিখিতগুলির মতো একটি তালিকা তৈরি করবে:

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

উদাহরণ এখানে: https://jsfiddle.net/zumCvma/2/

এখানে উল্লেখ: https://www.w3schools.com/tags/tag_dl.asp

Comments

আপনি যদি এই পদ্ধতিটি ব্যবহার করতে চলেছেন তবে কোনও শব্দকে সংজ্ঞায়িত করার জন্য শব্দবিজ্ঞানের যথাযথ উপায় <dt>এবং সেই শব্দটির সংজ্ঞাটি ব্যবহার করুন <dd>।

— বোবার্ট

Answer 16

এটি বুলেট পয়েন্ট ছাড়াই উল্লম্বভাবে একটি তালিকা অর্ডার করে। মাত্র এক লাইনে!

li {
    display: block;
}

Comments

কারিগরী নোট: এই কাজ করে কারণ এটি ডিফল্ট অগ্রাহ্য displayমান <li>, যা display: list-item;।

— mfluehr

Answer 17

শুধু তোমার পরিবর্তন list-style-typeবা list-styleআপনার ক্লাসে noneজন্য <li>।

এটার মতো কিছু:

li {
  list-style-type : none;
}

এছাড়াও আরও তথ্যের জন্য, আমি আপনাকে যে সমস্ত সম্পত্তি অর্পণ করতে পারি তার তালিকাবদ্ধ করেছি list-style-type, একটি ফলাফলের জন্য সমস্ত ফলাফল দেখতে নীচের কোডটি চালান:

.none {
  list-style-type: none;
}

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

.square {
  list-style-type: square;
}

.decimal {
  list-style-type: decimal;
}

.georgian {
  list-style-type: georgian;
}

.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.kannada {
  list-style-type: kannada;
}

.custom:before {
  content: '◊ ';
  color: red;
}

<ul>
  <li class="none">none</li>
  <li class="disc">disc</li>
  <li class="circle">circle</li>
  <li class="square">square</li>
  <li class="decimal">decimal</li>
  <li class="georgian">georgian</li>
  <li class="cjk-ideographic">cjk-ideographic</li>
  <li class="kannada">kannada</li>
  <li class="none custom">custom</li>
</ul>

Answer 18

সিএসএস কোড

ul
{
    list-style-type: none;
}

এইচটিএমএল কোড

<ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>   
</ul>

Comments

এটি শীর্ষস্থানীয় উত্তর হিসাবে একই, মূলত।

— ড্যান ড্যাসক্লেস্কু

Answer 19

আপনি যদি কোনও বিদ্যমান থিম বিকাশ করছেন তবে থিমের নিজস্ব কাস্টম তালিকার স্টাইল রয়েছে।

সুতরাং আপনি list-style: none;যদি উল বা লি ট্যাগ ব্যবহার করে তালিকার স্টাইল পরিবর্তন করতে না পারেন তবে প্রথমে এটি পরীক্ষা করে দেখুন !importantকারণ সম্ভবত স্টাইলের অন্য কোনও লাইন আপনার স্টাইলকে ওভাররাইট করছে।

যদি এটি না হয় তবে এটিতে সামগ্রী থাকতে পারে কিনা তা পরীক্ষা করে দেখুন li:before। তারপরে:

li:before { dispaly: none; }

Answer 20

 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>

Answer 21

আমি চেষ্টা করে দেখেছি:

header ul {
   margin: 0;
   padding: 0;
}

Comments

এটি আসলে বুলেটগুলি সরিয়ে দেয় না। তারা কেবল অফ-স্ক্রিনে ঠেলাঠেলি করে।

— mfluehr

Answer 22

আপনি যদি একটি ডিভ ব্লকে উল ব্যবহার করেন

// HTML file
<div class="some-class">
    <ul>
        <li>One</li>
    </ul>
</div>

আপনার স্টাইল শীট

.some-class ul {
       list-style: none;
}

আপনি যদি সরাসরি কোনও শ্রেণি বা ডিভ ব্লক ছাড়াই উল ব্যবহার করেন:

//Style Sheet
ul {
    list-style: none;
}

Comments

@ পিটারমোরটেনসেন: আপনি 5+ উত্তর গৃহীত উত্তরগুলির সাথে অভিন্ন সম্পাদনা করে চলেছেন। কেন তাদেরকে দুপাশে পতাকা দেবে না? সদৃশ উত্তর সম্পাদনায় সময় নষ্ট করবেন কেন? আপনি কিছুক্ষণের জন্য সাইটটির আশেপাশে রয়েছেন।

— ড্যান ড্যাসকলেসকু

Answer 23

আপনি যদি সিএসএসে অবলম্বন না করে জিনিসগুলি সহজ রাখতে চান তবে আমি কেবল  আমার কোড লাইনে একটি রেখেছি। অর্থাৎ <table></table>,।

হ্যাঁ, এটি কয়েকটি জায়গা ছেড়ে দেয় তবে এটি কোনও খারাপ জিনিস নয়।

Comments

-1 সরল? সিএসএস ছাড়া? এই কারণেই অনেকগুলি ওয়েবসাইট চিত্তাকর্ষক অবস্থায় রয়েছে। সিএসএস সরলতা যুক্ত করে। টেবিলগুলি এগিয়ে যাওয়ার পথ নয়।

— ওয়েবনুব

আসুন, 2013 সালে এটির উত্তর দেওয়া হয়েছিল G ;-) আমি বিশ্বাসও করতে পারি না যে আমি এমনকি কখনও এটি লিখেছি।

— ফিল হিলি