html - リスト項目間の DIV

Question

両側にマージンを追加して、2 つのリスト項目の間に div を配置するにはどうすればよいですか?

これが私が達成しようとしているレイアウトです:画像へのリンク

以下は、これを実現するために使用しようとしているコードです。

<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>

2番目と3番目のリスト項目に個々のスタイルを追加せずにこれを行う方法はありますか? それが私がこれを行うことを考えることができる唯一の方法です。

Answer 1

を取り除き、そのクラスに必要な を<div>与えます。<li><div>

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>​