Question

我是CSS的新手，我在IE8中使用列表遇到了这个问题。我正在创建一个带有几个li元素的无序列表，其中有两个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

你也可以漂浮盒子，给它们一个与li相匹配的高度。内联块在所有浏览器/版本中都无法正常工作。

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

使用CSS在IE 8中创建列表

1 个答案: