html - 缩放页面上的标题

Question

http://jsfiddle.net/CPSKa/

在我的网站上，当我放大到标题时，标题下方的行开始变短，无论如何我可以防止这种情况发生。

HTML 代码：

<div id="main_header">   
 <div id="main_header_wrapper">
     <a href="index.php"><img src="http://chattrd.com/maint/images/logo.png" alt="Chattrd"/></a>

 <nav id="navigation">
 <a href="index.php" class="nav_icon">Home</a>
 <a href="#" class="nav_icon">Blog</a>
 <a href="login.php" class="nav_icon">Login</a>
 <a href="#" class="nav_icon">Sign up</a>
 </nav>

 </div>
 </div>

CSS 代码：

body {
 padding: 0;
 margin: 0;
}
#main_header{
background:#FFF;
padding:10px 0; 
margin:auto;
border-bottom:1px solid #c5c5c5;}

#main_header_wrapper{
width:900px;
margin:auto;}

nav#navigation{
font-family: Arial;
padding-top: 2px;
text-align: right;
font-weight: bold;
float: right;
display: inline;}

a.nav_icon{
color:#000;
-webkit-transition:background 0.2s ease-in;  
-moz-transition:background 0.2s ease-in;  
-o-transition:background 0.2s ease-in;  
transition:background 0.2s ease-in; 
padding: 14px 25px;
text-decoration: none;}

a.nav_icon:hover{
background: #990033;
color: #FFF;}

Answer 1

将main_header元素的css宽度设置为width: 100%；

Answer 2

我认为将您的#main_header_wrapperCSS 更改为此应该可以：

#main_header_wrapper {
  max-width: 900px;
  margin: auto; }

放大超过视口宽度后，固定宽度为 900 像素会影响 div。max-width 使其保持一致。

Answer 3

这将起作用：

#main_header{
width:900px;
}