কীভাবে একক লাইনে UL তালিকাটি স্টাইল করবেন

Question

আমি এই তালিকাটি একটি লাইনে রেন্ডার করতে চাই।

• তালিকা আইটেম 1
• তালিকা আইটেম 2

হিসাবে দেখানো উচিত

* তালিকা আইটেম 2 * তালিকা আইটেম 2

কি সিএসএস শৈলী ব্যবহার করতে হবে?

Comments

আমি জানি এই প্রশ্নটি বুটস্ট্র্যাপের জন্য সুনির্দিষ্ট নয় তবে আমি টেক্সট, চিত্র, ভিডিও ইত্যাদির অনুভূমিক তালিকার জন্য বুটস্ট্র্যাপ থাম্বনেলগুলি খুব দরকারী বলে মনে করেছি

— অনুপম

Answer 1

ul li{
  display: inline;
}

আরও জানার জন্য তালিকার তালিকায় বেসিক তালিকার বিকল্পগুলি এবং একটি প্রাথমিক অনুভূমিক তালিকা দেখুন। ( ড্যানিয়েল স্ট্রেটকে ধন্যবাদ লিঙ্কগুলির জন্য নীচে )।

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

Comments

এটি কাজটি শেষ করার সময়, আপনি উপাদানগুলি ভালভাবে রাখার জন্য কিছু প্যাডিংও অন্তর্ভুক্ত করতে চাইবেন

— রব অ্যালেন

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

— আরজেড

বুলেটগুলি কীভাবে থাকবে? অথবা আমরা অন্য কোনও উপায়ে গুলি করতে পারি।

— আরডি

@ ডটডট হিসাবে চিহ্নিত করেছেন: {ডিসপ্লে: ইনলাইন using ব্যবহার করে বুলেট স্টাইলিং সরিয়ে ফেলা হয়। এর আশেপাশে থাকুন: 1. পরিবর্তে {ভাসা: বাম} ব্যবহার করুন (যদিও আইই 9 তে কাজ করছেন না)। ২. বাম-প্যাডিং যুক্ত করুন এবং একটি পটভূমি চিত্র যুক্ত করুন (এটি পটভূমির চিত্র হিসাবে বুলেট)।

— অ্যাড্রিন

Answer 2

আধুনিক ব্রাউজারগুলিতে আপনি নিম্নলিখিতগুলি করতে পারেন (CSS3 অনুগত)

ul
{
  display:flex;  
  list-style:none;
}

<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

Answer 3

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

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

সিএসএস কোড:

ul.list li{
  width: auto;
  float: left;
}

Answer 4

এরকম কিছু নিয়ে পরীক্ষার চেষ্টা করুন:

এইচটিএমএল

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

সিএসএস

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

আমি উদাহরণস্বরূপ একটি কোডপেন তৈরি করেছি: http://codepen.io/agm1984/pen/mOxaEM

Answer 5

মধ্যে বুটস্ট্র্যাপ ব্যবহার .list-inlineCSS বর্গ

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

রেফ: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h