首页 > IE7下float的问题?

IE7下float的问题?

各位大神,小弟有一事不明,望大神指点一二,小弟在此谢过了!
废话少说,请看代码:

   <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <style type="text/css">
        /*css reset*/
        body,div{margin:0;padding:0;font-family: "微软雅黑";font-size: 12px;}
        a{text-decoration: none;}
        /*my Css*/
        .oBox{width:60%;margin: 30px auto;padding:0 10px;background-color: #f3f3f3;line-height: 48px;}
        .selecItem{display: inline-block;*display: inline;font-size: 12px;line-height: 2em;vertical-align: middle;color:#000;margin-right: 10px;}
        .selecItem em{font-style: normal;color:#a99b96;}
        .moreItem{color: #ff9900;font-size: 12px;line-height: 4em;float: right;}
        .moreItem em{font-style:normal;background-color:#ff9900;padding:0px 3px;color:#fff;margin-left: 4px;border-radius: 2px;}
    </style>
    </head>
    <body>
        <div class="oBox">
            <a class="selecItem" href="javascript:void(0)">今日新单<em>(44)</em></a>
            <a class="selecItem" href="javascript:void(0)">美食<em>(298)</em></a>
            <a class="selecItem" href="javascript:void(0)">娱乐<em>(140)</em></a>
            <a class="selecItem" href="javascript:void(0)">美容<em>(99)</em></a>
            <a class="selecItem" href="javascript:void(0)">生活服务<em>(85)</em></a>
            <a class="selecItem" href="javascript:void(0)">酒店<em>(413)</em></a>
            <a class="selecItem" href="javascript:void(0)">电影<em>(34)</em></a>
            <a class="selecItem" href="javascript:void(0)">旅游<em>(77)</em></a>
            <a class="selecItem" href="javascript:void(0)">更多<em>(93)</em></a>
            <a class="moreItem" href="javascript:void(0)">更多<em>▼</em></a>
        </div>
    </body>
    </html>

为什么在IE7下class为moreItem的超链接和class为selecItem的超链接不在同一行?
如下图所示:


selecItem要float:left,反正就是一个左边一个右边,不然就会出现你说的那种情况

【热门文章】
【热门文章】