如何水平内联显示卡片

Question

希望你们一切都好我正在制作动态卡片，但它没有显示内联，我想让它与滚动条内联

我想让它水平内联

<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>

这里是 css

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%;
  }

Answer 1

你能补充一下吗

.scrollmenu {
  display:flex;
  flex-direction:row;
}

https://www.w3schools.com/csS/css3_flexbox_container.asp

Answer 2

首先：从 div.card 中删除父 div，然后在 div.card ->

中应用此 css

div.card {
 width: 300px;
 display: inline-block;
}

如何水平内联显示卡片

how to display card horizotally inline

html

css

frontend

reactjs