Question

我有一个需要水平显示的3个按钮的列表。在FF中一切都很好，但是IE将它们直接堆叠在一起。我的列表项代码如下：

感谢您的帮助

<style type="text/css"> 


          #navigation { 
       list-style: none;
        margin: 0px 0px 0px 278px;
        padding: 0;
        text-align:left;
        z-index:1;    

    }

    #navigation li {
        display: inline-block;
    }

    #navigation a {
        display: block;
        width: 140px;
        height: 15px;
        background: url("http://aracelid.110mb.com/boton_ROLLOUT_08.png") no-repeat;
        padding: 10px 0.5em;
        color: #FFFFFF;
        text-decoration: none;
        font-size:12px;
        text-align: center;
    }

    #navigation a:hover {
        background: url("http://aracelid.110mb.com/boton_ROLLOVER_08.png") no-repeat;
    }


           #one, #two,#three {background: url("http://aracelid.110mb.com/boton_ROLLOUT_08.png") no-repeat 0px 0px;}

         #one_div{width:140px;height:36px;}
#two_div{width:140px;height:36px;}
#three_div{width:140px;height:36px;}

<ul id="navigation"> 
    <li><a href="#" id="one" style="color:#FFFFFF;text-decoration:none;" ><div id="one_div">One</div></a></li> 
    <li><a href="#" id="two" style="color:#FFFFFF;text-decoration:none;"><div id="two_div" >Two</div></a></li> 
    <li><a href="#" id="three" style="color:#FFFFFF;text-decoration:none;"><div id="three_div" >Three</div></a></li> 
</ul>

Answer 1

在navgivation li class中添加一个float：left ..

 #navigation li {
        display: inline-block;
        float:left;
    }

Answer 2

尝试一下：

ul {
    flex-direction: row;
    -ms-flex-direction: row;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
}

应在水平显示时，Internet Explorer垂直显示列表

2 个答案: