在我的网站上,当我放大到标题时,标题下方的行开始变短,无论如何我可以防止这种情况发生。
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;}