Question

我创建了5个社交媒体图标，它们居中于页面中央，它们都在同一行上彼此相邻。我希望社交媒体图标在页面尺寸减小时与页面的左边缘对齐并在彼此下方显示。我尝试了以下代码，但没有用。（减小窗口大小时，图标在下方对齐，但仍居中于页面中间，我希望它们在左侧对齐。）

@media (max-width: 1200px) {
  .ul {
    display: none;
  }
  .bars2 {
    display: block;
  }
  .social {
    margin-left: 0;
    left: 0;
  }
  .social .fa {
    display: block;
  }
}

.fa {
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 10px;
}

.fa:hover {
  color: #7E7791;
  background: white;
}

#social {
  height: 40px;
  width: 300px;
  margin-top: 10%;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

<div id="social" class="social">
  <a href="#" class="fa fa-youtube-play"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-pinterest"></a>
</div>

Answer 1

您的风格看起来不错。问题出在您的选择器上，这是两个主要问题

1-您需要将媒体查询放在文档的底部。请记住，css是一种级联语言，将优先使用最后一种样式。

2-一旦完成第一点，css还将根据选择器的级别将样式优先。您使用id选择器提供了auto的值，并为类选择器提供了0的值。这优先于de id选择器。因此，您不会获得该0值

希望有帮助：）

.fa {
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 10px;
}

.fa:hover {
  color: #7E7791;
  background: white;
}

#social {
  height: 40px;
  width: 300px;
  margin-top: 10%;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}


@media (max-width: 1200px) {
  .ul {
    display: none;
  }
  .bars2 {
    display: block;
  }
#social {
    margin-left: 0;
    left: 0;
  }
  .social .fa {
    display: block;
  }
}

<div id="social" class="social">
  <a href="#" class="fa fa-youtube-play"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-pinterest"></a>
</div>

Answer 2

我将@media查询放在了其余选择器之后，因此它不会被覆盖。另外，我创建了一个新的id选择器来覆盖之前设置的边距：

#social {
  margin: 10% 0 0 0;
}

希望这会有所帮助。

.fa {
  background-color: black;
  color: white;
  text-decoration: none;
  font-size: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 10px;
}

.fa:hover {
  color: #7E7791;
  background: white;
}

#social {
  height: 40px;
  width: 300px;
  margin-top: 10%;
  position: absolute;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

@media (max-width: 1200px) {
  .ul {
    display: none;
  }
  .bars2 {
    display: block;
  }
  .social {
    left: 0;
  }
  .social .fa {
    display: block;
  }
  
  #social {
    margin: 10% 0 0 0;
  }
}

<div id="social" class="social">
  <a href="#" class="fa fa-youtube-play"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-pinterest"></a>
</div>

Answer 3

这是因为您设置了margin-left: auto;，而您应该将其设置为左侧。

如何使用@media设置社交媒体图标的最大宽度？

3 个答案: