ভার্টিক্যাল বাটন গ্রুপ তৈরি করতে বাটনগুলোর display: block সেট করে দিতে হয়, যাতে সেগুলো একে অপরের নিচে থাকে।
উদাহরণ
নিচের কোডটি চালিয়ে ভার্টিক্যাল বাটন গ্রুপ তৈরি করার উদাহরণ দেখুন:
<!DOCTYPE html> <html>
<head>
<style>
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
</body>
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</body>
</html>
ব্যাখ্যা: display: block ব্যবহার করে প্রতিটি বাটন ব্লক-লেভেল এলিমেন্টের মতো আচরণ করে, ফলে সেগুলো একের পর একনিচে স্ট্যাক হয়। width: 120px সব বাটন একই প্রস্থে রাখে।
