html - 使用 CSS 在 IE 8 中创建列表

Question

我是 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 中添加其他内容吗？如果有人能提供帮助，那就太好了。

谢谢。

Answer 1

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

ul li div.left,
ul li div.right {
    float: left;
    height: 40px;
    width: 400px;
}