1

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;}
4

3 回答 3

0

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

于 2013-08-12T14:54:58.367 回答
0

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

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

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

于 2013-08-12T14:39:34.387 回答
0

这将起作用:

#main_header{
width:900px;
}
于 2013-08-12T14:38:46.887 回答