Hello everyone! I'm currently working on creating dynamic cards, but I'm having trouble displaying them inline. I'd like to arrange the cards horizontally with a scroll bar.
https://i.sstatic.net/zqcua.png
I want to make them display in horizontal line
<div className='scrollmenu d-inline'>
{
data.map((user, index) => (
<div >
<div className="card text-center" style={{ width: 10 + 'rem' }}>
<img className='m-auto mt-2' src={user.img} alt="Avatar" style={{ width: 100 + 'px' }} />
<a href="#home">{user.name}</a>
</div>
</div>
))
}
</div>
Here is some CSS code:
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
img {
border-radius: 50%;
}