我在按照我想要的方式布置页面时遇到了一些问题。我的页面上的两个 div 之间出现了一个间隙，还有一个我不知道如何居中的 css 菜单。任何帮助将不胜感激...
仅供引用，template_header.php 是目前唯一包含任何内容的模板。
这是代码...
* index.php *
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body >
<?php include './templates/template_header.php'; ?>
<div id="pageBody">
<?php
include './templates/template_contextmenu.php';
include './templates/template_content.php';
include './templates/template_sidebar.php';
?>
</div>
<div id="pageFooter">
<?php include './templates/template_footer.php'; ?>
</div>
</body>
</html>
* template_header.php *
<div class="banner" >
<img class="bannerImage" src="./graphics/FullLogo2.png" height="216" />
</div>
<div id="menu">
<ul>
<li></li>
<li><a href="index.php">Home</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="info.php">Information</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
* 样式.css *
header, footer, aside, nav, article, section {
display: block;}
body {
margin: 0px;
padding: 0px;}
div.banner {
background-image:url("./graphics/BannerBG_220.png") ;
background-repeat:repeat-x;
height:13.5em;
border:solid;
border-width:thin;
margin: 0;
padding: 0;}
.bannerImage {
display: block;
margin-left: auto;
margin-right: auto;}
#menu{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
height:2.25em;
font-size:1.25em;
font-weight: 500;
background:transparent url(./graphics/navbackground2.png) repeat-x ;
font-family:Arial,Verdana,Helvitica,sans-serif;}
#menu ul {
padding:0;
list-style-type:none;
width:auto;}
#menu ul li {
display:block;}
#menu ul li a {
display:block;
float:left;
color:#e5e5e5;
text-shadow: 2px 2px 2px #3d3d3d;
text-decoration:none;
padding: .4em 1.5em .2em 1.5em;
height: 2.25em;
background:transparent url(./graphics/MenuDivider.png) no-repeat top right;}
#menu ul li a:hover, #menu ul li a.current {
background: url(./graphics/NavBackgroundOn.png) repeat-x;}
最佳答案
如果没有宽度，您将无法使用 margin: 0 auto 使#menu 居中。您可以使用 javascript 测量链接的宽度，然后将所有链接宽度的总和设置为#menu 的宽度。您会看到短暂的延迟，但它会起作用。
至于白色间隙，使用 Firebug 进行检查会告诉您不需要的边距或填充来自何处。
关于php - 几个页面布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9264909/