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/

如果你想让它们在另一个下方显示一个，那么你根本不应该浮动它。

Answer 2

在每个<br>标记后取出<a>元素，您的问题就会消失。您将左侧的元素浮动，但它们也使用<br>标记分隔，这些标记具有一些默认边距和填充。

Answer 3

您只需要包含属性clear:both（或左，右）。

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

3 个答案: