4

谷歌浏览器真的给我设置了障碍，我需要一些帮助。

我正在设置一个菜单，并且在缩小 (<50%) 时文本会换行。我不想使用 white-space: nowrap 并且我不能让我的菜单更宽。Safari，Firefox，甚至 IE - 没有问题，但是当使用 chrome 缩小时，它会强制自动换行。有任何想法吗。如果需要更多 html/css，请告诉我，我试图简化一些事情：

CSS：

#page{
    display: block;
    overflow:visible;
    font:"Times New Roman", Times, serif;
    text-align: center;
    margin: auto;
    width: 100%;
    height: 1000px;
    background:#956e41;
}

#header{
    width:auto;
    max-width:1105px;
    margin:auto;
    position: relative;
    overflow:visible;
}

#mainPicture{
    height:475px;
    width: 1105px;
    background-image:url(images/main.jpg);
    background-repeat:no-repeat;
    margin: auto;
    position: absolute;
}

#headerFrame{
    height:80px;
    margin: auto;
    width: 1080px;
    background-color: #a15535;
    position: relative;
}

#logo{
    height: 150px;
    width: 340px;
    margin: auto;
    background-image:url(images/logo.png);
    float: left;
}

#menuFrame{
    width:auto;
    max-width: 740px; 
    margin: auto;
    width: 1080px;
    display:inline-block;

}

#menu{
    width:auto;
    font-size:16px;
    font-weight:600;
    margin: 0 0 0 0 ;   
    text-align:right;
    display:inline-block;
}

#menu ul{
    margin-left: 80px;  
}

#menu ul li{
    list-style:none;
    float:left;
    margin: 0 0 0 10px;
    padding: 0 10px 10px 0;         
}

HTML：

<div id="page">
    <div id="header">
        <div id="mainPicture"></div>
            <div id="headerFrame" class="borderSq">
            <div id="logo">
                <!--<img src="images/logo.png" />-->
            </div>
            <div id="menuFrame">    
                <div id="menu">
                    <ul>
                        <li class="border li">menu1<br /><span>text</span></li>
                        <li class="border li">THE menu1<br /><span>text</span></li>
                        <li class="border li">menu1<br /><span>text</span></li>
                        <li class="li">menu1<br /><span>text</span></li>
                    </ul>    
                </div>
            </div>
        </div>
    </div>
</div>

一些 CSS 可能看起来是多余的，我失去了冷静，开始向它扔东西......从来没有好过。

演示：http: //jsfiddle.net/X48ng/

^用chrome打开并缩小....你会看到（也可以向右滚动查看文本）

约翰

4

1 回答 1

1

好的，我想我确切地看到了它的原因，但它有点摆弄你想要的东西，

margin-left在稍微弄乱了小提琴之后，我设法通过删除项目上的，在缩小到 33% 时阻止菜单项被推到新行#menu ul{}，

如此处所示： js Fiddle（缩小到 25% 时仍然会发生，但现在可以缩小到 33% 而不是仅 50%）

我能想到的唯一原因是；随着页面大小的调整，边距被放大或沿着这些线，

如果有人可以帮助改进这个答案，请这样做。

史蒂夫。

于 2013-05-30T08:09:45.290 回答