谷歌浏览器真的给我带来了很大的麻烦,我需要一些帮助。
我正在设置一个菜单,但是当缩小页面(<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打开并缩小页面……你会看到(也可以向右滚动文本)。
约翰