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

时间:2019-05-28 03:34:33

标签: html css

我想使用社交媒体图标,并且试图在它们之间添加空间。然后,我在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;
 }

3 个答案:

答案 0 :(得分: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;
 }

答案 1 :(得分:0)

我建议只在每个margin-left(不是第一个)上设置.contact

通过为每个元素赋予.contact same 类,然后将伪选择器:not与伪选择器{ {1}}。这可以在以下内容中看到:

:first-of-type
.contact-container {
  position: absolute;
  display: flex;
  margin: 0;
  padding: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%.-50%)
}

.contact-container,
.contact {
  list-style: none;
  border: none;
  position: relative;
  line-height: 50px;
}

.contact:not(:first-of-type) {
  margin-left: 20px;
}

答案 2 :(得分:0)

如果您只想添加空间,则可以使用弹性框justify-content:space-around
我在transform: translate(-50%, -50%);中编辑了您的.contact1 请在下面查看此代码段

.contact1 {
    position: absolute;
    display: flex;
    justify-content:space-around;
    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;
 }
<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>