html - 列表项之间的 DIV

Question

如何在两个列表项之间放置一个 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>

有没有办法在不向第二个和第三个列表项添加单个样式的情况下做到这一点？这是我能想到的唯一方法。

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