列表项之间的DIV

时间:2012-09-08 16:42:26

标签: html css

如何在两个列表项之间放置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个列表项添加单独样式的情况下执行此操作?这是我能想到的唯一方法。

2 个答案:

答案 0 :(得分: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

答案 1 :(得分: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>​