html - 如何在列表中的这些徽标之间添加空格

Question

我想使用社交媒体图标，并尝试在它们之间添加空间。然后我进入ul并将每个设置li为不同的类。我知道使用fontawesome链接和图标有一种更简单的方法来解决这个问题，但我只是想看看这种方法是否有效，我是一个初学者，我 2 周前才开始编码。

我试过了light-height，没有任何反应：

    <div class="container2">
        <ul class="contact1">
            <li class="contact2"><img src="facebook.png" alt="facebook" class="facebook"> </li>
            <li class="contact3"><img src="twitter.png" alt="twitter" class="twitter"> </li>
            <li class="contact4"><img src="instagram.png" alt="instagram" class="instagram"> </li>
            <li class="contact5"><img src="twitch.png" alt="twitch" class="twitch"> </li>
        </ul>
    </div>

.contact1 {
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%.-50%) 
}


 .contact1, .contact2, .contact3, .contact4, .contact5 {
    list-style: none;
    border: none;
    position: relative;
    line-height: 50px;
 }

标签： htmlcss

Answer 1

我建议在 html/css 中使用正确的类方式

这是HTML

<div class="container2">
    <ul>
        <li><img src="facebook.png" alt="facebook" class="facebook"> </li>
        <li><img src="twitter.png" alt="twitter" class="twitter"> </li>
        <li><img src="instagram.png" alt="instagram" class="instagram"> </li>
        <li><img src="twitch.png" alt="twitch" class="twitch"> </li>
    </ul>
</div>

这是CSS：

.container2 ul{
    position: absolute;
    display: flex;
    justify-content:space-around;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}

.container2 ul li{
    list-style: none;
    border: none;
    position: relative;
    line-height: 50px;
 }