small problem in css background
i want make two icons together side by side
My html code
<head>
<sty开发者_JAVA百科le>
.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>
i want show them side by side
example :
icone1|icone2
but the code output
icond1
icone2
Thank you
Just add
.icon_one, .icon_two{display:inline-block;}
Live Demo
Then you wont have to worry about clearing floats later.
Otherwise you can use floats,
.icon_one, .icon_two{float:left;}
Demo with floats
Add a float to your elements...
.icon_one, .icon_two {
float: left;
}
add float:left to each icon class so they float next to each other, dont forget to add some margin space in between.
You can also change the div's to spans instead.
<div class="icons">
<span class="icon_one"></span>
<span class="icon_two"></span>
</div>
You can either float:left; each div or set each div to display:inline-block;
So Example 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/
NB: You can actually trim down your code, as above.
Also, I changed the background-color so it was easier to see the example.
Example 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/
加载中,请稍侯......
精彩评论