Html 使图片正确地相邻显示

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

.脸谱网{
宽度：64px；
高度：64px；
浮动：左；
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/facebook-5-512.png');
背景重复：无重复；
背景尺寸：64px 64px；
文本缩进：-500px；
}
.facebook:hover{
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/facebook-hover.png');
}
李{
列表样式：无；
}




.推特{
宽度：64px；
高度：64px；
浮动：对；
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
背景重复：无重复；
背景尺寸：64px 64px；
文本缩进：-250px；
}
.推特：悬停{
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/twitter-hover.png');
}
李{
列表样式：无；
}

然后将

float:left

设置为twitter:

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

---

然后将

float:left

设置为twitter:

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

---

您将twitter图标向右浮动。只需将其更改为

float:left



.脸谱网{
宽度：64px；
高度：64px；
浮动：左；
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/facebook-5-512.png');
背景重复：无重复；
背景尺寸：64px 64px；
文本缩进：-500px；
}
.facebook:hover{
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/facebook-hover.png');
}
李{
列表样式：无；
}




.推特{
宽度：64px；
高度：64px；
浮动：左；
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
背景重复：无重复；
背景尺寸：64px 64px；
文本缩进：-250px；
}
.推特：悬停{
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/twitter-hover.png');
}
李{
列表样式：无；
}



您将twitter图标向右浮动。只需将其更改为
float:left



.脸谱网{
宽度：64px；
高度：64px；
浮动：左；
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/facebook-5-512.png');
背景重复：无重复；
背景尺寸：64px 64px；
文本缩进：-500px；
}
.facebook:hover{
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/facebook-hover.png');
}
李{
列表样式：无；
}




.推特{
宽度：64px；
高度：64px；
浮动：左；
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
背景重复：无重复；
背景尺寸：64px 64px；
文本缩进：-250px；
}
.推特：悬停{
背景图像：url（'http://pccb.org.au/wp-content/uploads/2014/12/twitter-hover.png');
}
李{
列表样式：无；
}



您不必使用float，请尝试使用display属性：display:inline块

.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');
}

另外，最好在url属性中使用精灵图像和相对路径
您不必使用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');
}

另外，最好在url属性中使用sprite图像和相对路径。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徽标的右浮动改为左浮动，正如其他人所述，所有内容都将排列在屏幕的左上角。
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徽标的右浮动改为左浮动，正如其他人所说，所有东西都将排列在屏幕的左上角。
为什么不把
推特
放在左边而不是右边？为什么不把
推特
放在左边而不是右边？哇，我现在觉得很傻哈哈。谢谢！我想这都是学习过程的一部分。哇，我现在觉得自己很愚蠢，哈哈。谢谢！我想这都是学习过程的一部分。