我正在开发我的第一个网站,我在每个页面的顶部都有导航链接。我注意到该网站的一些非常特殊的行为是:高度大于或等于最大垂直像素的页面占据一定宽度,而内容未填充高度的页面具有不同的宽度,即使代码为菜单完全一样。为什么会发生这种情况,补救措施是什么?这是代码:html文件:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About</title>
<link rel="stylesheet" type="text/css" href="about_style.css" />
</head>
<body>
<nav id="menu">
<ul>
<li id="home"><a href="../index.html">Home</a></li>
<li id="news"><a href ="../news/index_news.html">News</a></li>
<li id="tragic_complexity"><a href="../tragic/index_tr.html">Tragic Complexity</a></li>
<li id="d_diary"><a href="../diary/d_diary.html">D Diary</a></li>
<li id="geeks"><a href="../geeks/geeks.html">Geeks = 1</a></li>
<li id="about">About</li>
</ul>
</nav>
<ul id="info">
<li>
About the site
</li>
<li>
About the founder
</li>
</ul>
</body>
</html>
css 文件:
body
{
background-image:linear-gradient(#336666, #66cccc);
}
#info,#menu
{
text-align:center;
}
#info li
{
display:block;
font-family:serif;
height:300px;
width:600px;
border:1px solid black;
overflow:hidden;
padding: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
margin:20px auto 20px auto;
background-color:white;
}
#menu ul li
{
display: inline-block;
margin:auto 20px auto 20px;
font-size: 150%;
font-family: Arial, Verdana, sans-serif;
}