希望你們都做得很好我正在制作動態卡片，但它沒有顯示行內，我想讓它與滾動條行內
我想讓它水平行內
<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%;
}
uj5u.com熱心網友回復：
你能補充一下嗎
.scrollmenu {
display:flex;
flex-direction:row;
}
https://www.w3schools.com/csS/css3_flexbox_container.asp
uj5u.com熱心網友回復：
首先：從 div.card 中洗掉父 div，然后在 div.card 中應用這個 css ->
div.card {
width: 300px;
display: inline-block;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453261.html
上一篇：用css撰寫時背景影像不出現