Question

I’m setting up a footer for a site and using an unordered list with three list items as follows:

<ul id="socialnav">
    <li id="facebook"></li>
    <li id="twitter"></li>
    <li id="googleplus"></li>
</ul>

I am trying to use background images for the list items to display the social media icons and then I would like to apply a hover state to the list item for the button’s ‘on-state’. However, my three icons won’t appear horizontally in the list. Here is my css:

#socialnav {
display: inline;
line-height: 42px;
}

#facebook {
background-image: url("images/fb.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

#twitter {
background-image: url("images/twt.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

#googleplus {
background-image: url("images/gplus.png");
background-repeat: no-repeat;
list-style-type: none;
height: 42px;
}

Two questions – why is this not working? And is there a better/easier way to do this?

Answer 1

To make your li elements appear in a horizontal fashion, you can make two changes.

First, remove the display: inline from the ul:

#socialnav {
    line-height: 42px;
}

Second, style the li elements to float and use display: block:

#socialnav li {
    display: block;
    float: left;
}

Note that the width and border directives were added to allow the elements to appear on the page which the images are unavailable. You can remove them as needed.

JSFiddle here.