title: Display:inline not working
body: <p>I'm fairly new to html and css.</p>
  
  <p>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.</p>
  
  <p>Here's the idea. </p>
  
  <p>I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.</p>
  
  <p>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.</p>
  
  <p>The problem is display:inline isn't working.</p>
  
  <p>I would really appreciate it if someone could help me out on this one.</p>
  
  <p>This is a bad example but, you understand the principle.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
      #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;}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table style="width:600px;margin:0 auto;"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;ul id="nav_bar"&gt;
                      &lt;div class="nav_button"&gt; &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;/div&gt;
                      &lt;div class="nav_button"&gt; &lt;li&gt; &lt;a href="#"&gt;Contact us&lt;/a&gt; &lt;/li&gt; &lt;/div&gt;
                      &lt;div class="nav_button"&gt; &lt;li&gt; &lt;a href="#"&gt;Shipping&lt;/a&gt; &lt;/li&gt; &lt;/div&gt;
                      &lt;div class="nav_button"&gt; &lt;li&gt; &lt;a href="#"&gt;About us&lt;/a&gt; &lt;/li&gt; &lt;/div&gt;
                  &lt;/ul&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>