Question

我有一个带有两个UL的顶级导航区域。一个漂浮在左边，一个漂浮在右边。

在IE7中，正确浮动的UL似乎一直延伸到左侧，占用了整个可用空间。在IE8和更新的浏览器中，当然它很好......它们只扩展了LI中内容的宽度。

示例：

IE7

<---Floated left UL---><----------------------------Floated right UL--->

in IE8
<---Floated left UL--->                         <---Floated right UL--->

我尝试过最小宽度和宽度，但似乎无法正确... 这只是IE7占用整个宽度的默认行为，除非使用设置的像素宽度或百分比进行指定。

Answer 1

为浮动元素指定宽度（首选）或显示：inline。

<强>风格

.nav {display:inline; background:#CCC;}
ul.nav li {display:inline; margin:0 0.1em;}
#nav1 {float:left;}
#nav2 {float:right;}

<强> HTML

<ul id="nav1" class="nav">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
</ul>
<ul id="nav2" class="nav">
    <li>Sit amet</li>
    <li>Consectetur</li>
    <li>Adipiscing</li>
</ul>

显然你会想要更多地设定列表的样式;我为上下文提供了一些样式。顺便说一句，IE无法识别最小宽度。

在顶部导航区域浮动UL

1 个答案: