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

Answer 2

尝试给他们一个float:left

Answer 3

在你的CSS中：

.iconFriends{
 background: url(../images/icons/friends_16x16.png) no-repeat;
 width: 16px;
 height: 16px;
 border: none;
 float: left /* or right, depending on the desired outcome */
 }

Answer 4

选项1：将<div>替换为<span>

选项2：将<div>设置为display: inline;。它的默认display属性值为block，这就是为什么每个属性都在它自己的行上。

.iconFriends {
    display: inline;
    ...

Answer 5

我建议改变元素的顺序，如下：

<div class="icon iconFriends"><a href="#"></a></div>

注意div上的额外icon类。

然后将其用于CSS：

.icon a
{
    display: block;
    width: 16px;
    height: 16px;
}

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

添加float: left;会将它们全部放在同一行。在display: block;上设置a将允许您设置宽度和高度（使整个元素可单击）。

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

5 个答案: