如何正确对齐ul元素？

Question

我的列表元素格式不正确。如何以表格格式排列它，使它看起来干净整洁。以下是供参考的代码

Details.js

<ul className="extras"> 
                {extras.map((item, index) => {
                    return <li key={index}>
                    <img src={starImage} height="10%" width="10%" /> {item}</li>
                })}
</ul>

App.css

.extras {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-column-gap: 10rem;
  grid-row-gap: 1rem;
}

以下是最终结果

列表的排列看起来不太好。任何好的解决方案，以使其正确对齐。

Answer 1

您可以为此使用表格标签。

  <tr className=""> 
            {extras.map((item, index) => {
                return 
           <td key={index}>
                <img src={starImage} height="10%" width="10%" /> {item}</td>
            })}
 </tr>