htmlcsslistunordered

Display:inline not working

I'm fairly new to html and css.

I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.

Here's the idea.

I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.

I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.

The problem is display:inline isn't working.

I would really appreciate it if someone could help me out on this one.

This is a bad example but, you understand the principle.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    #nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
    .nav_button {background-color:purple;width:100px;height:50px;}
    .nav_button:hover {background-color:pink;}
    .nav_button li {display:inline;} /* Not working ?!? */
    .nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>

<body>
    <table style="width:600px;margin:0 auto;">
        <tr>
            <td>
                <ul id="nav_bar">
                    <div class="nav_button"> <li> <a href="#">Home</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">About us</a> </li> </div>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>
Solution

  • display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.