求助CSS大大页面小化后变形被挤下去了

Question

刚做一个页面，导航就遇到问题页面百分之百显示的话就正常，但是缩小后右边的导航文字就会被挤下去

HTML代码在这

<!--box的DIV是顶部导航-->

<div class="box">

<div class="logo">

<ul>

<li><img src="img/logo.png" width="48" height="47" /></li>

<li class="litext">广告直投</li>

<li class="litext2">后台数据资源管理系统</li>

</ul>

</div>

<div class="admin">

<ul>

<li>你好XXX:</li>

<li>|</li>

<li>账号设置</li>

<li>|</li>

<li>账号设置</li>

<li>|</li>

<li>账号设置</li>

<li>|</li>

<li>账号设置</li>

<li>|</li>

<li>账号设置</li>

</ul>

</div>

</div>

CSS代码在这

.box{ width:100%; height:60px; background:#444A51;}

.logo{ float:left; width:280px; height:60px; margin:6px 15px;}

.litext{ font-size:20px; font-weight:bold; color:#FFFFFF; letter-spacing:9px; padding-left:10px;}

.litext2{ font-size:11px; padding-left:10px; line-height:20px; color:#FFFFFF;}

.admin{ float:right; width:500px; height:60px;margin:6px;}

求助了

Answer 1

1、外层header宽度100%，在header里面套固定宽度的DIV，然后居中，把导航栏放进去。2、在header里应用css min-width这是我知道的两种方法。

Answer 2

 不要定义宽度。。ul样式可以简化<a href=""><账号设置></a> |<a href=""><账号设置></a>  |<a href=""><账号设置></a>  |  <a href=""><账号设置></a> css直接定义a标签的样式。。 

Answer 3

我记得有个可以检测分辨率，更具分辨率大小段，显示不同的界面