我想使用社交媒体图标,并尝试在它们之间添加空格。然后我在 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;
}
最佳答案
我建议在 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;
}
关于html - 如何在列表中的这些 Logo 之间添加空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56334660/