目前在让 CSS 正确显示模型页面方面存在问题。尝试制作一个包含标题、菜单、左/右栏和页脚的两栏页面。除了菜单部分，一切看起来都不错。该页面在 Internet Explorer 中显示正确，但在 Firefox 和 Chrome 上菜单 div 的开始和 ul 之间显示了很大的差距。下面是我的 XHTML 和 CSS。
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Template</title>
<link rel = "stylesheet"
type = "text/css"
href = "Layout.css" />
</head>
<body>
<div id = "all">
<div id = "head">
<p>Header</p>
</div>
<div id = "menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Weapons</a></li>
<li><a href="#">Characters</a></li>
<li><a href="#">Collectables</a></li>
<li><a href="#">Multiplayer</a></li>
</ul>
</div>
<div id = "left">
<p>Left Content</p>
</div>
<div id = "right">
<p>Content</p>
</div>
<div id = "footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
CSS
#all {
width: 800px;
margin-left: auto;
margin-right: auto;
}
#head {
background-color: black;
border: black solid 1px;
}
#menu {
width: 100%;
background-color: red;
float: left;
}
#menu ul {
margin-left: -2.5em;
}
#menu li {
list-style-type: none;
float: left;
width: 8em;
text-align: center;
border: black solid 1px;
}
#menu a {
display: block;
text-decoration: none;
color: white;
}
#menu a:hover {
background-color: yellow;
}
#left {
float: left;
width: 200px;
background-color: red;
min-height: 30em;
}
#right {
float: left;
width: 600px;
background-color: gray;
min-height: 30em;
}
#footer {
clear: both;
color: white;
background-color: black;
text-align: center;
min-height: 30px;
}
最佳答案
更新你的 Ul 样式
来自
#menu ul {
margin-left: -2.5em;
}
至
#menu ul {
margin: 0;
padding: 0;
}
关于html - Firefox 和 Chrome 上的 CSS/XHTML 显示问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7786312/