Html CSS:display:inline在IE上似乎不起作用
我使用CSS制作一个无序列表Html CSS:display:inline在IE上似乎不起作用,html,css,html-lists,Html,Css,Html Lists,我使用CSS制作一个无序列表ul,这样水平显示 <div id="header"> <ul> <li class="header-li">....</li> <li class="header-li" style="width: 200px; display: inline-block;"> ...
ul
,这样水平显示
<div id="header">
<ul>
<li class="header-li">....</li>
<li class="header-li" style="width: 200px; display: inline-block;">
...
</li>
</ul>
</div>
display:inline
有助于水平显示我的列表,这在FF、Safari和Chrome上可以使用,但在IE8上不起作用。这里是一些屏幕截图,显示Firefox外观和IE外观的不同
你想使用
浮动:左
而不是显示:内联
来获得更好的支持Harry,我可能错了,但是你不能用一组简单的浮动div来完成吗?我不确定我是否完全理解Harry的问题?你附加的屏幕截图不是很清楚。有没有可能附加一个更清晰的图像?请参阅jsfiddle.net上的示例以查看上述代码的工作示例:@sscirrus:您是对的,这正是我所做的。锻炼得很好。谢谢你+1
#header
{
height: 30px;
width: 985px;
padding: 0px 10px 0px;
vertical-align: middle;
display: inline-block;
font-size: 14px;
overflow: hidden;
}
#header ul{
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.header-li{
display: inline;
padding-right: 20px;
}