CSS和HTML实现列表元素横向排列与鼠标悬停图片放大

HTML

    <div class="contact-me">
        <h2>Get In Touch</h2>
            <ul>
                <li>
                    <a href="">
                        <img src="images/linkedin.png" alt="linkedin-img">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/email.png" alt="email-img">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/github.png" alt="github-img">
                    </a>
                </li>
            </ul>
    </div>

CSS

.contact-me{
    text-align: center;  // 使内容居中（标题和列表中的图片）
}

ul li{
    display: inline;   // 使列表中的图片横向排列
    margin-right: 50px;  // 图片与图片之间的距离为50px
    margin-bottom: 100px;
}

a{
    text-decoration: none;  // 出去链接的下划线（否则图片右下角有小黑点）
}

ul li img:hover{
    transform: scale(1.15);  // 鼠标悬停图片放大1.15倍
}