CSS - Float下推问题,图标显示在楼梯上,如布局

Question

遇到CSS下推问题,一直在寻找修复,但无法找出究竟是什么问题.所有图标都以阶梯式布局显示.需要你的帮助来解决这个问题.

HTML

<div style="/*float: left; width:153.6px;" */ class="footerStyles">
  <h4 style=" margin: 0; font-size: 100%;">CONNECT</h4>
  <a href="#" class="email connectWith"></a>
  <br/>
  <a href="#" class="twitter connectWith"></a>
  <br/>
  <a href="#" class="facebook connectWith"></a>
  <br/>
  <a href="#" class="googleplus connectWith"></a>
  <div class="clear"></div>
</div>

CSS

.connectWith{
    /*background-position: left center; 
    background-repeat: no-repeat; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-left: 40px;*/ 
    margin-right: 0;
    padding: 0;
    float: left;
}
/* email    ---------- */
.email{
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
    text-indent: -9999px;
    background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
    background-position: 0 0;
}
.email:hover{
    background-position: 0 50px;
}
/* twitter  ---------- */
.twitter{
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
    text-indent: -9999px;
    background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
    background-position: 0 0;
}
.twitter:hover{
    background-position: 0 50px;
}
/* facebook ---------- */
.facebook{
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
    text-decoration: -9999px;
    background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
    background-position: 0 0;
}
.facebook:hover{
    background-position: 0 50px;
}
/* google+  ---------- */
.googleplus{
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
    text-decoration: -9999px;
    background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
    background-position: 0 0;
}
.googleplus:hover{
    background-position: 0 50px;
}

的jsfiddle

Answer 1

如果你想要它们并排,那么你应该删除<br />你拥有的.这就是造成阶梯效应的原因.

http://jsfiddle.net/HZ4UU/1/

如果你希望它们在另一个下面显示一个,那么你根本不应该浮动它.