Question

footer.footer {
  height: 300px;
  width: 100%;
  background-color: #333333;
  position: relative;
}
.wrapper {} p.copyright {
  color: #fff;
  line-height: 40px;
  font-size: 0.7em;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
}
.social {
  font-size: 19px;
  float: right;
  color: #fff;
  padding-right: 30px;
}

<footer class="footer">
  <div class="wrapper">
    <p class="copyright">© GROUP TITLE 2015, social media icons supposed to be there ----></p>
    <div class="social">
      <a href="#" class="twitter"></a>
      <i class="fa fa-twitter"></i>
      <a href="#" class="facebook"></a>
      <i class="fa fa-facebook"></i>
      <a href="#" class="instagram"></a>
      <i class="fa fa-instagram"></i>
    </div>
  </div>
</footer>

如何在与我的版权线相同的级别显示我的社交媒体图标（定义在我的页脚底部但不在其下面 - 请参阅代码段）？

HTML

    <footer class="footer">
        <div class="wrapper">
        <p class="copyright">© GROUP TITLE 2015</p>
    <div class="social">
        <a href="#" class="twitter"></a>
        <i class="fa fa-twitter"></i>
        <a href="#" class="facebook"></a>
        <i class="fa fa-facebook"></i>
        <a href="#" class="instagram"></a>
        <i class="fa fa-instagram"></i>
    </div>
</div>
</footer>

CSS

footer.footer {
    height: 300px;
    width: 100%;
    background-color: #333333;
    position: relative;
}
.wrapper {
}
p.copyright {
    color: #fff;
    line-height: 40px;
    font-size: 0.7em;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
}
.social {
    font-size: 19px;
    float: right;
    color: #fff;
    padding-right: 30px;
}

版权显示在页脚的正确位置，但如何在不设置padding或margin的情况下在同一级别（高度）显示我的社交媒体图标？

Answer 1

你可以尝试这个：

footer.footer {
    height: 300px;
    width: 100%;
    background-color: #333333;
    position: relative;
}
.wrapper {
}
p.copyright {
    color: #fff;
    line-height: 40px;
    font-size: 0.7em;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
}
.social {
    font-size: 19px;    
    color: #fff;
    position: absolute;     
    right: 5%;
    top: 85%;
}

DEMO HERE

Answer 2

.social {
    font-size: 19px;    
    color: #fff;
    position: absolute;     
    right: 5%;
    top: 72%;
}

Answer 3

你可以试试这个。我已经创建了小提琴，你需要改变你的html结构，如下所示。如果您不想单独安排社交部分。

<p class="copyright">© GROUP TITLE 2015, 
    <span class="social">social media icons supposed to be there ----&gt;
      <a href="#" class="twitter"></a>
      <i class="fa fa-twitter"></i>
      <a href="#" class="facebook"></a>
      <i class="fa fa-facebook"></i>
      <a href="#" class="instagram"></a>
      <i class="fa fa-instagram"></i>
    </span>
      </p>

css中的小变化：

.social {
    font-size: 19px;
    /* float: right; */
    color: #fff;
    padding-right: 30px;
    /* width: 100%; */
    height: 10px;
}

我希望你能找到它。

Fiddle

如何在与我的版权相同的级别显示我的社交媒体图标？

3 个答案: