javascript - 如何使当我单击列表项时列表移动以使该项目位于中心？

Question

所以我正在为学校做这个任务，我必须在（某种）基本级别上重新创建一个网站。我正在制作官方www.formula1.com网站。当您在页面上向下滚动时，您会看到所有比赛的时间表。不同的种族彼此相邻放置，按下一个会将其移动到中间并打开一个详细的视图窗口。我不必让它打开包含更多信息的窗口，但我确实想这样做，以便如果单击列表上的一个项目，则列表会相应地横向移动以使其现在位于中间.

我用 Javascript 函数搞砸了一段时间，我会在列表中添加一个类，如果选择了某个项目，它会将 x 数量的像素移到一边。从技术上讲，这是可行的，但我只能单击一个项目并使其移动，但在那之后它就不起作用了，因为现在如果我单击另一个项目，它必须移动不同的距离，但它当然不知道。

有没有办法让它简单地将列表集中在该特定项目上？

这是我的列表的 html。我使用 flexbox 将项目放在一起。

<ul>
    <li>
        <img src="images/belgium-flag.png" alt="Belgian Flag">  
        <p>Belgium</p>
    </li>
    <li>
        <img src="images/netherlands.png" alt="Dutch Flag">     
        <p>Netherlands</p>
    </li>
    <li>
        <img src="images/italy.png" alt="Italian Flag">     
        <p>Italy</p>
    </li>
    <li>
        <img src="images/russia.png" alt="Russian Flag">        
        <p>Russia</p>
    </li>
    <li>
        <img src="images/turkey.png" alt="Turkish Flag">        
        <p>Turkey</p>
    </li>
    <li>
        <img src="images/usa.png" alt="Flag of the United States of America">       
        <p>United States</p>
    </li>
</ul>

标签： javascripthtmlcsshtml-lists