Question

Google Chrome真的给我带来了障碍，我需要一些帮助。

我正在设置菜单，缩小时文本正在换行（<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打开并缩小....你会看到（向右滚动文本）

约翰

Answer 1

好吧，我想我确切地知道是什么导致了它，但它有点像你想要的东西，

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

如下所示： js Fiddle（当缩小到25％时仍然会发生但现在可以缩小到33％而不是只有50％）

我能想到的唯一一件事就是造成这种情况;随着页面的大小调整，边距会被放大或者沿着这些线延伸，

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

史蒂夫。

谷歌浏览器：文字不会正确最小化

1 个答案: