How can I make my icon
s show up next to each other, rather than underneath each other?


Tags: html,css

Problem :

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:

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



Solution :

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)

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

    CSS Howto..

    How to make Bootstrap sticky footer content go full page height?

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    How to include PHP code in CSS?

    How to 'clip away' part of a div using CSS?

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    How to remove hover function from top row in table

    how to bring two blocks closer

    how to position these CSS elements without defining height and width

    How to create a sliding animation on menu hover with jQuery?

    How to make Superfish menu vertical in first level but horizontal in second level?

    How to show one element when click on the another element with css?

    How do I get a CSS class to show up in my javascript with my previous method?

    How to rearrange these elements with CSS?

    section to be trigger of show/hide content by click html/css only

    How can I change Javascript Value into percentage instead of pixels

    how to create horizontal drop-down menu with javascript for asp.net website?

    How to align navbar to center with css

    How to hide first level span element by CSS “>” selector

    How to changing css on bootstrap button Group

    How to make div size bigger?

    How to override style of single RichFaces component

    How to line up the bottom of side-by-side Div layers in CSS

    how to 3D rotate a 'a' tag?

    How do I put a horizontal line/border right in the middle of a table row?

    How to keep footer at the bottom of the page when resizing on bootstrap

    How can I modify a CSS class using JavaScript?

    How to use css image sprites in this code?

    How to hide repeated content from search engines with CSS?

    How to use float and margin together?

    How to DRY up on SASS transitions with multiple elements?