Question

我对网络开发相当新，并且一直在我的页面页脚中处理一些社交按钮。我已经设法使它们具有悬停效果并且我想要它们，它们现在只是在正确的位置彼此不显示。我希望他们能够彼此相邻，我知道这是用div和包装完成的，不知道如何将它实现到我的代码中。这是我的代码：

＆＃13;

<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>

＆＃13;

正如您所看到的，代码有效，但图像位于页面的两端，我需要它们在左侧彼此相邻显示。非常感谢任何帮助。

Answer 1

然后将float:left设置为twiter：

.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;

＆＃13;

<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>

＆＃13;

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样式，如果您将float-right更改为浮动左侧为您的twitter徽标，正如其他人已经说过的那样，所有内容都将排列在屏幕的左上角。< / p>

获取图片以便彼此正确显示

4 个答案: