我一辈子都找不到如何做到这一点，不管是用flexbox还是其他东西！

谢谢你的回答， 亨利

顺晟科技：

尝试此：

<div className="snavbarcontainer">
            
            <div className="toplefticon">
                <a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
            </div>

            <div className="mainIcons">
                <ul className="icons_ul">
                    <li><a href="#"><img src={ILookupPupils} alt="Pupil Lookup" /></a></li>
                    <li><a href="#"><img src={IMUsers} alt="Manage Users" /></a></li>
                    <li><a href="#"><img src={IHand} alt="Coming Soon" /></a></li>
                    <li><a href="#"><img src={IMAdmins} alt="Manage Admins" /></a></li>
                    <li><a href="#"><img src={IDash} alt="Dashboard" /></a></li>
                    <li><a href="#"><img src={IDB} alt="Dashboard" /></a></li>
                </ul>
            </div>

        </div>

<div className="snavbarcontainer">
            
            <div className="toplefticon">
                <a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
            </div>

            <div className="mainIcons">
                <ul className="icons_ul">
                    <li><a href="#"><img src={ILookupPupils} alt="Pupil Lookup" /></a></li>
                    <li><a href="#"><img src={IMUsers} alt="Manage Users" /></a></li>
                    <li><a href="#"><img src={IHand} alt="Coming Soon" /></a></li>
                    <li><a href="#"><img src={IMAdmins} alt="Manage Admins" /></a></li>
                    <li><a href="#"><img src={IDash} alt="Dashboard" /></a></li>
                    <li><a href="#"><img src={IDB} alt="Dashboard" /></a></li>
                </ul>
            </div>

        </div>

我在代码底部添加了左下角图标，以便它们之间有适当的空间。