Question

How can I place a div in between two list items, adding a margin on both sides?

Here is the layout I am trying to achieve: Link to Image

Below is the code I am trying to use to make this happen.

<div id="logo">
  Logo Image
</div>

<div id="navigation">
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
  </ul>
</div>

Is there a way to do this without adding individual styles to the 2nd and 3rd list items? That’s the only way I can think of doing this.

Answer 1

Get rid of the <div>, and give the <li> that you would want the <div> in its class:

http://jsfiddle.net/charlescarver/jTYnW/

<div id="navigation">
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li id="logo">
        Logo Image
   </li>
   <li>Item 3</li>
   <li>Item 4</li>
  </ul>
</div>​