0

我有一个基本的网站标题，里面我的徽标浮动到左侧，菜单浮动到右侧。

看看这个 js fiddle http://jsfiddle.net/RjHxR/6/

菜单是水平的，所以我应用float:left在#main_menu li项目上。但是，我也想让菜单响应，所以我在某些屏幕尺寸上应用float: none了#main_menu li项目，因为我想在这些屏幕尺寸上有一个标准的垂直菜单（参见 js fiddle css）。当我将谷歌浏览器调整为该分辨率时，它看起来不错。但是，当我尝试将浏览器的大小调整回更高的分辨率时，即使为该分辨率指定了项目，#main_menu li项目仍然存在！它只发生在 Chrome 中。在 jsfiddle 上自己尝试一下。float: nonefloat: left

任何帮助表示赞赏。

4

2 回答 2

1

一旦您修复页面验证并且问题在 webkit 浏览器中消失，您的导航列表中有未关闭的锚标记：http: //jsfiddle.net/panchroma/PUmyx/。

去弄清楚为什么那个昙花一现会产生这种效果；）

HTML 

<div id="header">
<div id='logo'>LOGO</div>
<nav>
    <ul id="main_menu">
        <li><a href='#'>HOME</a></li>
        <li><a href='#'>PAGES</a></li>
        <li><a href='#'>BLOG</a></li>
        <li><a href='#'>WORK</a></li>
        <li><a href='#'>ELEMENTS</a></li>
                        <li><a href='#'>CONTACT US</a>

        </li>
    </ul>
</nav>
</div>
于 2013-06-09T16:38:13.097 回答
1

Chrome 会自动display:list-item从 Chrome 样式表中给出 li。因此，当您删除 float:left 并重新启用浮动时，它具有默认的 display:list-item 并将保留为列表。

在此处输入图像描述

要获得所需的效果，请将display属性inline设为默认值，然后更改为display:list-item内部媒体条件，如下所示：

#main_menu li {
    display: inline;
    margin-left: 10px;
}
@media screen and (max-width: 600px) {
    #main_menu li {
        display:list-item;
    }
    #header { width: 100%;}
}
于 2013-06-09T16:08:10.687 回答