Question

我想把两个图标并排放在一起

我的HTML代码

<head>
<style>
.icon_one{
    width:25px;
    height: 20px;
    background:#ffffff url('icon_one.jpg') no-repeat right top;
}

.icon_two{
    width:25px;
    height: 20px;
    background:#ffffff url('icon_two.jpg') no-repeat right top;
}
</style>
</head>

<div class="icons"><div class="icon_one"></div><div class="icon_two"></div></div>

我希望并排显示它们

示例：

icone1 | icone2

但代码输出

icond1

icone2

谢谢

Answer 1

添加

.icon_one, .icon_two{display:inline-block;}

<强> Live Demo

然后你不必担心以后清除花车。

否则你可以使用浮动，

.icon_one, .icon_two{float:left;}

<强> Demo with floats

Answer 2

为元素添加浮动...

.icon_one, .icon_two {
    float: left;
}

Answer 3

为每个图标类添加float:left，使它们彼此相邻，不要忘记在它们之间添加一些边距空间。

Answer 4

您可以float:left;每个div或将每个div设置为display:inline-block;

所以示例1：

.icon_one, .icon_two{
    width:25px;
    height: 20px;
    background:red url('icon_one.jpg') no-repeat right top;
    display:inline-block;
}

.icon_two{
     background:blue url('icon_two.jpg') no-repeat right top;
}

http://jsfiddle.net/jasongennaro/YESWV/1/

注意：您实际上可以修改代码，如上所述。

此外，我更改了background-color，因此更容易看到示例。

示例2：

.icon_one, .icon_two{
    width:25px;
    height: 20px;
    background:red url('icon_one.jpg') no-repeat right top;
    float:left;
}

.icon_two{
    background:blue url('icon_two.jpg') no-repeat right top;
}

http://jsfiddle.net/jasongennaro/YESWV/2/

Answer 5

您也可以将div改为跨度。

<div class="icons">
    <span class="icon_one"></span>
    <span class="icon_two"></span>
</div>

css背景中的小问题

5 个答案: