0

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

jsfiddle：http: //jsfiddle.net/NY94w/1/

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;}

​</p>

4

3 回答 3

2

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

ul.hozlist li {display: inline-block; *display: inline; zoom:1;}
于 2012-08-06T08:05:36.247 回答
0

float:left在下面使用，而不是display: inline-block; *display: inline

ul.hozlist li {float: left}

看演示

于 2012-08-06T08:00:01.090 回答
0

IE 支持内联块，但仅适用于本机内联的元素。所以，如果你真的想使用 inline-block，你只能使用 spans 和 strongs 和 ems

使用float:left代替inline-block：

ul.hozlist li {float: left;}
于 2012-08-06T08:05:11.320 回答