React アイテムを１行三列で表示させたい

Question

JavaScript/React 初心者です。
下記コードでオンラインショッピンサイトのように１行に３アイテム横並びで
データを表示させたいです。
現状は、<li>で縦並びです。
検索しても欲しい情報が得られなかったため、
書き方のアドバイスいただけますと幸いです。

const React = require('react')
class Index extends React.Component {
render(){
const products = this.props.products;
return (
<div style={myStyle}>
<h1>Online shopping!</h1>
<ul>
{
products.map((product)=>{
return(
<li key={product._id}>
<a href={`/products/${product._id}`}><font color="silver">{product.name}{product.description}</font></a>
<form method="POST" action={`/products/${product._id}?_method=DELETE`}>
<img src={product.img} width="295px" height="393px" ></img>
<input type="submit" value="DELETE"/>
</form>
<a href={`/products/${product._id}/edit`}><font color="silver">Edit This Product</font></a>
</li>
)
})
}
</ul>
</div>
)
}
}

module.exports = Index;

Answer 1

display: inline-block;
で出来た