title: Horizontal (inline) list in HTML/CSS with divs
body: <p>I am trying to build a simple horizontal list, where each list item is a div and I want them all to sit next to one another. When I try to use the code below though, the divs end up on separate lines. Here's what I've got:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="navlist"&gt;
  &lt;li&gt;&lt;div&gt;...&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div&gt;...&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div&gt;...&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#navlist li
  {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  }
  </code></pre>
  
  <p>I have tried to give my divs a max width and a width but that doesn't work either. Basically, they show up without bullet points on separate lines.</p>
  
  <p>Some help on fixing this would be very appreciated, thanks!!</p>