Question

我在浏览页面上的两个div元素时遇到了问题。

我已经尝试过在列表中执行它们但是没有用。有没有人有任何想法？这是我的代码：

.footer {
height:300px;
background-color:#303236;
border-top:1px solid #dbdbdb;
}
.footer img:hover{
transition:2s;
}
.twitter {
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/Twittergrey_zpsf9256984.png');
background-size:cover;
width:50px;
height:50px;

}
.twitter:hover {
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/Twitter_zpsaa4c63a9.png');
width:50px;
height:50px;
transition: background 0.3s ease-in-out;
}
.facebook {
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/Facebookgrey_zps29c64b71.png');
background-size:cover;
width:50px;
height:50px;

}
.facebook:hover {
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/Facebook_zpsecf6ed49.png');
width:50px;
height:50px;
transition: background 0.3s ease-in-out;
}

我将其上传到小提琴（ HTML包含在小提琴链接中）： http://jsfiddle.net/ue9hbe6h/

目前在我的网页上看起来像这样： http://bit.ly/1tFKr0Z

任何帮助表示感谢！

Answer 1

您的标记错误，关闭<a>标记并将float:left;添加到其包装

<div class="footer">
    <div class="container">
        <div class="facebook"><a href="http://www.twitter.com/alexwileydesign"></a></div>
        <div class="twitter"><a href="http://www.twitter.com/alexwileydesign"></a></div>
    </div>
</div>


.footer {
    height:300px;
    background-color:#303236;
    border-top:1px solid #dbdbdb;
}
.footer img:hover{
    transition:2s;
}
.twitter {
    background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/Twittergrey_zpsf9256984.png');
    background-size:cover;
    width:50px;
    height:50px;
    float:left;

}
.twitter:hover {
    background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/Twitter_zpsaa4c63a9.png');
    width:50px;
    height:50px;
    transition: background 0.3s ease-in-out;
}
.facebook {
    background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/Facebookgrey_zps29c64b71.png');
    background-size:cover;
    width:50px;
    height:50px;
    float:left;

}
.facebook:hover {
    background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/Facebook_zpsecf6ed49.png');
    width:50px;
    height:50px;
    transition: background 0.3s ease-in-out;
}

如果您不想使用浮动元素，

替代方法是将display:inline-block;添加到.facebook and .twitter。

Answer 2

将display:inline-block;添加到.facebook和.twitter

横向调整我的两个社交媒体div

2 个答案: