CSS দিয়ে হরিজেন্টাল বাটন গ্রুপ তৈরি করুন

হরিজেন্টাল বাটন গ্রুপ তৈরি করতে বাটনগুলোর float: left বা display: inline-block / flex ব্যবহার করা হয়।

উদাহরণ

নিচের কোডটি চালিয়ে হরিজেন্টাল বাটন গ্রুপ তৈরি করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .btn { 
        color: black; 
        background-color: orange; 
        width: 120px; 
        text-align: center; 
        font-size: 15px; 
        padding: 20px; 
        float: left; 
      } 
      .mybtn { 
        background-color: orange; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>Result</h2> 
    <p>Click below for result:</p> 
    <div class="mybtn"> 
      <button class="btn">Result</button> 
      <button class="btn">Result</button> 
      <button class="btn">Result</button> 
      <button class="btn">Result</button> 
      <button class="btn">Result</button> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: float: left ব্যবহার করে বাটনগুলো বামে সাজানো হয়েছে। আধুনিক পদ্ধতিতে প্যারেন্টে display: flex বা display: inline-flex ব্যবহার করা ভালো, যা ফ্লোটের ক্লিয়ারেন্স সমস্যা এড়াতে সাহায্য করে।