CSS -浮动下推问题，图标显示在楼梯布局中
CSS -浮动下推问题，图标显示在楼梯布局中
提问于 2013-11-18 09:02:18
遇到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;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-11-18 09:05:03
如果您希望它们并排在一起，那么您应该删除您已有的<br />。这就是造成楼梯效应的原因。
如果你想让它们一个显示在另一个的下面，那么你就不应该让它浮动。
Stack Overflow用户
发布于 2018-07-18 08:49:28
您只需要包含属性clear:both (或left、right)。
Stack Overflow用户
发布于 2013-11-18 09:11:25
在每个<a>标签后面去掉<br>元素，你的问题就会消失。您正在向左浮动一个元素，但它们也是用具有一些默认边距和填充的<br>标记分隔的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20038363
复制相关文章
相似问题