我如何使我的图标显示在彼此旁边，而不是在彼此下面?[英]How can I make my icon s show up next to each other, rather than underneath each other? 本文翻译自  Karem  查看原文  2010-12-14  15307    css/

I have this

我有这个

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

and the css for the icons class looks all similiar to this:

图标类的css看起来很相似:

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

Now the results is that there is like a <br> when I do this. But if i remove the div and make a normal <img src="..."> It shows fine. How can i fix this?

现在的结果是当我这样做的时候会有一个
。但是如果我删除div并创建一个正常的显示好了。我该怎么解决这个问题呢?

5 个解决方案

#1

set your divs to have display:inline-block or better yet remove the divs and apply the styling to the a tags directly (again with display:inline-block)

将div设置为display:inline-block或更好的方法是删除div并将样式直接应用到a标签中(同样还有display:inline-block)

html

html

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

css

css

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

   display:inline-block;
}

#2

try giving them all a float:left

试着给他们一个浮点数:左。

#3

In your CSS:

在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 */
 }

#4

Option 1: replace the <div> with a <span>

选项1:将

替换为

Option 2: set the <div> to display: inline;. Its default display property value is block, which is why each one is on its own line.

选项2:设置

显示:inline;它的默认显示属性值是block，这就是为什么每一个都在自己的行上。

.iconFriends {
    display: inline;
    ...

#5

I would suggest reversing the order of your elements, as such:

我建议把你的要素顺序颠倒一下，如下:

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

Note the extra icon class on the div.

注意div中额外的图标类。

Then use this for your CSS:

然后将它用于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;
}

Adding float: left; will put them all on the same line. Setting display: block; on the a will allow you to set the width and height (making the entire element clickable).

添加浮动:左;会把它们放在同一条线上。设置显示:块;在a上可以设置宽度和高度(使整个元素可点击)。