让图片彼此正确显示

Question

我对 Web 开发还很陌生，并且一直在研究页面页脚中的一些社交按钮。我设法使它们具有悬停效果，并且我想要，它们现在只是没有在正确的位置彼此相邻显示。我希望它们彼此相邻，我知道这是通过 div 和包装完成的，只是不确定如何在我的代码中实现它。这是我的代码：

<style>
  .facebook {
    width: 64px;
    height: 64px;
    float: left;
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -500px;
  }
  .facebook:hover {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-hover.png');
  }
  li {
    list-style: none;
  }
</style>

<ul>
  <li>
    <a href="https://www.facebook.com/pages/Payneham-City-Concert-Band/1383434338547917?fref=ts" target="FB Page">
      <div class="facebook">Facebook

      </div>
    </a>
  </li>
</ul>

<style>
  .twitter {
    width: 64px;
    height: 64px;
    float: right;
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -250px;
  }
  .twitter:hover {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-hover.png');
  }
  li {
    list-style: none;
  }
</style>



<ul>
  <li>
    <a href="https://twitter.com/PaynehamBand" target="Twitter Page">
      <div class="twitter">
      </div>
    </a>
  </li>
</ul>

如您所见，代码有效，但图像位于页面的两端，我需要它们在左侧并排显示。非常感谢任何帮助。

Answer 1

然后将float:left设置为推特：

.twitter {
    width: 64px;
    height: 64px;
    float: left;/*not right*/
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -250px;
  }

Answer 2

您将推特图标浮动到右侧。只需将其更改为float: left;

<style>
  .facebook {
    width: 64px;
    height: 64px;
    float: left;
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -500px;
  }
  .facebook:hover {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-hover.png');
  }
  li {
    list-style: none;
  }
</style>

<ul>
  <li>
    <a href="https://www.facebook.com/pages/Payneham-City-Concert-Band/1383434338547917?fref=ts" target="FB Page">
      <div class="facebook">Facebook

      </div>
    </a>
  </li>
</ul>

<style>
  .twitter {
    width: 64px;
    height: 64px;
    float: left;
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -250px;
  }
  .twitter:hover {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-hover.png');
  }
  li {
    list-style: none;
  }
</style>



<ul>
  <li>
    <a href="https://twitter.com/PaynehamBand" target="Twitter Page">
      <div class="twitter">
      </div>
    </a>
  </li>
</ul>

Answer 3

你不必使用float，试试display属性：display:inline-block;

.twitter, .facebook {
    display:inline-block;
    width: 64px;
    height: 64px;


}
.twitter {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
}
.facebook {
    url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
}
.twitter {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
}
.twitter:hover {
    url('your hover url');
}
.facebook:hover {
    url('your hover url');
}

PS。最好在 url 属性中使用精灵图像和相对路径

Answer 4

ul 标签对于您正在尝试做的事情似乎有点多余。与其为每个徽标制作单独的 ul，不如将它们包装在两个单独的 div 中。

<div id="facebook">
    <a href="https://www.facebook.com/pages/Payneham-City-Concert-Band/1383434338547917?fref=ts" target="FB Page">
    <div class="Facebook">Facebook</div>
    </a>
</div>

<div="twitter">
    <a href="https://twitter.com/PaynehamBand" target="Twitter Page">
    <div class="twitter"></div>
    </a>
</div>

现在您可以从 CSS 中删除 li 样式，如果您将 twitter 徽标的 float-right 更改为向左浮动，正如其他人已经说过的那样，所有内容都将排列在屏幕的左上角。