1

我是 CSS 新手，我在 IE8 中遇到了列表问题。我正在创建一个包含多个 li 元素的无序列表，其中包含两个名为 left 和 right 的 div。

HTML 代码 -

    <ul>
        <li>
             <div class="left">
                 <p>ONE</p>
             </div>
             <div class="right">
                 <p>TWO</p>
             </div>
        </li>
        <li>
             <div class="left">
                 <p>THREE</p>
             </div>
             <div class="right">
                 <p>FOUR</p>
             </div>
        </li> 
   </ul>

我本质上想创建一个包含两列的列表。我的 CSS -

    ul {
       list-style-type: none;
       padding: 0px;
       margin: 0px;
   }

    ul li {
      height: 40px;
      width: 800px;
      border: 1px solid;
   }



ul li div.left, div.right {
      display: inline-block;
      *display: inline;
      zoom: 1;
   }

使用上面的 CSS 和 html，我得到一个包含两列高度为 40px 的列表。在 Firefox 和 chrome 中，它显示的正是我想要的，但在 IE 中却是另一回事。

在 IE 中，我看到了相同的列表，但唯一的问题是间距。在 IE 中，左右 div 位于其父 li 的顶部，而在 Chrome 和 Firefox 中，它们的元素位于中间，这就是我想要的。

如何在 IE 中发生这种情况？在 IE 中，我的 div 紧贴在 li 元素的顶部，中间没有填充。我需要在我的 CSS 中添加其他内容吗？如果有人可以提供帮助，那就太好了。

谢谢。

4

1 回答 1

0

你也可以浮动你的盒子，并给它们一个与 li 匹配的高度。内联块在所有浏览器/版本中都不能按预期工作。

ul li div.left,
ul li div.right {
    float: left;
    height: 40px;
    width: 400px;
}
于 2012-09-20T08:37:20.677 回答