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はインラインブロックをサポートしますが、ネイティブにインラインである要素に対してのみです。したがって、本当にインラインブロックを使用したい場合は、スパン、ストロング、およびemsに制限されます。

float:leftの代わりに使用inline-block：

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