Question

真的很难过，可能是我有点昏暗。

考虑这个html：

        <div id="ebt_info_nav">
            <ul>
                <li><a href="#"><i class="icon-h"></i> Home</a></li>
                <li><a href="#"><i class="icon-i"></i> FAQ</a></li>
                <li><a href="#"><i class="icon-s"></i> Feedback</a></li>            
                <li><a href="#"><i class="icon-b"></i> Bookmark Us</a></li>
                <li><a href="#"><i class="icon-c"></i> Contact Us</a></li>
</ul>


        <div id="ebt_search">
            <form method="post" action="#">
            <input type="text" name="search" placeholder="Search" /><button class="ebt_input_button"><i class="icon-search"></i></button>
            </form>
        </div><!-- / End #ebt_search -->

    <div class="ebt_clear"></div>

</div> <!-- / End #ebt_info_nav -->

这个CSS：

#ebt_info_nav {
width: 98%;
line-height:30px;
margin: 0 1% 1% 1%;
background: #336699;
border-radius: 6px;
background: -moz-linear-gradient(90deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%);
background: -webkit-linear-gradient(90deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%);
background: -o-linear-gradient(90deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%);
background: -ms-linear-gradient(90deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%);
background: linear-gradient(0deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%); 
padding: 0.5% 0;   
} 


#ebt_info_nav ul {
margin: 0 0 0 10px;
padding: 0;
float: left;
width: 70%;
}

#ebt_info_nav ul li {
list-style-type: none;
float: left;
margin: 0 0.25%;
font-family: 'Open Sans', sans-serif;
font-size: 1.1em;
} 

#ebt_info_nav ul li a {
display:inline-block;
text-decoration: none;
color: #fff;
padding: 0.5% 3%;
text-shadow: 1px 1px #003366;
} 

#ebt_info_nav ul li a:hover {
background: #fff;
color: #336699;
border-radius:6px;
text-shadow: none;
}  

#ebt_search { 
float: right;
padding: 0 1%;
}

图片在这里 http://i44.tinypic.com/2v9aphl.png

为什么IE 10会使项目换行或用换行符替换空格？我删除了fontello图标，它仍然只是文本。

我们将非常感激地收到任何指示。

Answer 1

根据你给我们的意见，我认为你的意思是这样的？

http://codepen.io/anon/pen/eIfiF

抱歉，让我告诉你我做了什么。

为了让它停止破坏并继续使用新行，我删除了小%个填充，并display:inline-block使其更合适而不是float:left;

如果您需要/想要保留float:left属性，您只需删除此行并/它/应该/工作：

padding: 0.5% 3%;

Internet Explorer 10列表项空间变为中断

1 个答案: