Question

我有一个无序列表，除了ie6 + 7外，在大多数浏览器中显示正常。问题是我设置了列表项的样式，给它们一个宽度和高度，并将它们显示为一个块，以便具有正确的大小。 IE解释块并垂直放置列表项而不是水平放置这里是我的代码;

HTML

<div>
     <ul class="hozlist">
          <li><a href="#" class="btnyellow ">View Details</a></li>
          <li><a href="#" class="btnyellow ">View NDP</a></li>
          <li><a href="#" class="btnyellow ">View News</a></li>
    </ul>
</div>

CSS

ul.hozlist {
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: left;
}
ul.hozlist li {display: inline-block; *display: inline}

    .btnyellow
    {
        width: 93px;
        height: 21px;
        background: yellow;      
        border:1px solid red;
        line-height:21px;
        vertical-align: middle;    
        padding: 0;
        cursor: pointer;
        font-size: 70%;
        text-align: center;
        display: block;
    }
    a.btnyellow, a.btnyellowsmall{text-decoration: none;color: black;font-family: Arial;}

Answer 1

虽然A.K的答案可以解决您的问题，但使用float并不总是最佳解决方案。如果您不想浮动元素，可以将zoom:1添加到ul.hozlist li {}规则集中。

ul.hozlist li {display: inline-block; *display: inline; zoom:1;}

Answer 2

使用float:left代替display: inline-block; *display: inline

ul.hozlist li {float: left}

SEE DEMO

Answer 3

IE支持内联块，但仅适用于本机内联的元素。所以，如果你真的想使用内联块，你只能使用跨度，强度和ems

使用float:left代替inline-block：

ul.hozlist li {float: left;}

IE6 + 7中的无序水平列表问题

3 个答案:

SEE DEMO