Html 如何让我的图标 <div> 彼此相邻显示，而不是彼此下方？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4440813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make my icon <div>s show up next to each other, rather than underneath each other?
提问by Karem
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?
现在的结果是，<br>当我这样做时就像一个。但是，如果我删除 div 并使其正常<img src="...">显示正常。我怎样才能解决这个问题？
回答by Gabriele Petrioli
set your divs to have display:inline-blockor better yet remove the divs and apply the styling to the atags 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;
}
回答by Jasper De Bruijn
try giving them all a float:left
试着给他们一个 float:left
回答by Ioannis Karadimas
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 */
}
回答by Paul D. Waite
Option 1: replace the <div>with a <span>
选项 1：替换<div>为<span>
Option 2: set the <div>to display: inline;. Its default displayproperty value is block, which is why each one is on its own line.
选项 2：设置<div>为display: inline;. 它的默认display属性值为block，这就是为什么每个属性都在自己的行上。
.iconFriends {
display: inline;
...
回答by Ryan Kinal
I would suggest reversing the order of your elements, as such:
我建议颠倒元素的顺序，例如：
<div class="icon iconFriends"><a href="#"></a></div>
Note the extra iconclass on the div.
注意icondiv 上的额外类。
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 awill allow you to set the width and height (making the entire element clickable).
添加float: left;会将它们全部放在同一行上。设置display: block;在a将允许您设置宽度和高度（使整个要素可点击）。
