如何让我的图标<div>显示在彼此旁边而不是彼此之下？

Question

我有这个

<a href="#"><div class="iconFriends"></div></a>
<a href="#"><div class="iconFavorite"></div></a>
<a href="#"><div class="iconPM"></div></a>
<a href="#"><div class="iconShield"></div></a>

而且icon类的css看起来都像这样:

.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
}

现在的结果是,就像<br>我这样做的时候.但如果我删除div并使其正常<img src="...">它显示正常.我怎样才能解决这个问题？

Answer 1

将你的div设置为display:inline-block或更好,然后删除div并a直接将样式应用于标签(再次使用display:inline-block)

HTML

<a href="#" class="iconFriends"></a>
<a href="#" class="iconFavorite"></a>
<a href="#" class="iconPM"></a>
<a href="#" class="iconShield"></a>

CSS

.iconFriends{
   background: url(../images/icons/friends_16x16.png) no-repeat;
   width: 16px;
   height: 16px;
   border: none;

   display:inline-block;
}