列表项之间的DIV

Question

如何在两个列表项之间放置div，在两边添加边距？

以下是我想要实现的布局：Link to Image

以下是我试图用来实现这一目标的代码。

<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

您可以尝试使用此代码

<ul>
        <li>
            <div>test</div>
        </li>
        <li>
            <div>test</div>
        </li>
        <li class="specific">
            <div>test</div>
        </li>
         <li>
            <div>test</div>
        </li>
</ul>

将css调整为div

Answer 2

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