html - 水平对齐我的两个社交媒体 div

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

我将它上传到 fiddle(HTML 包含在 fiddle 链接中): 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如果您不想使用 float 元素。