-1

我的标题有问题。我的网站是歪斜的我的链接。我认为是style.css，所以我尝试了我的style.css，但没有成功。我是 .css 的初学者。这是我网站的图片： 在此处输入图像描述

这是HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $page_title; ?></title>   
<link rel="stylesheet" href="includes/style.css" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
  <h1></h1>
  <h2></h2>
</div>
<div id="navigation">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="calculator.php">Calculator</a></li>
    <li><a href="lotto.php">Lotto Numbers</a></li>
    <li><a href="craps.php">Craps</a></li>
  </ul>
</div>
<div id="content"><!-- Start of the page-specific content. -->
<!-- Script 3.2 - header.html -->

这是CSS代码：

/*
Author  :   Christopher Robinson
Email       :   christopher@edg3.co.uk
Website :   http://www.edg3.co.uk/
*/
* {
   border: 0;
   margin: 0;
   padding: 0;
}
/* general */
a {
   color: #777;
   text-decoration: none;
}
a:hover {
   color: #333;
   text-decoration: none;
}
/* body */
body {
   background: #ffffff;
   color: #555;
   font: 0.8em Arial, Helvetica, "bitstream vera sans", sans-serif;
}
/* header */
#header {
   border-bottom: 1px solid #999;
   height: 80px;
   margin: 0 auto;
   width: 751px;
}
#header h1 {
   color: #888;
   font-size: 300%;
   letter-spacing: -3px;
   text-align: right;
   padding: 5px;
   margin-bottom: -20px;
}
#header h2 {
   color: #CCC;
   font-size: 200%;
   letter-spacing: -2px;
   text-align: right;
}
/* navigation */
#navigation {
   background: #fafafa;
   border-right: 1px solid #999;
   margin: 0 auto;
   width: 750px;
   height: 40px;
   list-style: none;
}
#navigation li {
   border-left: 1px solid #999;
   float: left;
   width: 187px;
   list-style: none;
}
#navigation a {
   color: #555;
   display: block;
   line-height: 40px;
   text-align: center;
}
#navigation a:hover {
   background: #e3e3e3;
   color: #555;
}
#navigation .active {
   background: #e3e3e3;
   color: #777;
}
/* content */
#content {
   height: auto;
   margin: 0 auto;
   padding: 0 0 20px;
   width: 751px;
}
#content h1 {
   border-bottom: 1px dashed #999;
   font-size: 1.8em;
   padding: 20px 0 0;
}
#content p {
   padding: 20px 20px 0;
}

/* footer */
#footer {
   border-top: 1px solid #999; 
   height: 50px;
   margin: 0 auto;
   padding: 10px;
   text-align: center;
   width: 751px;
}
/* Added by Larry Ullman: */
.error, .ad {
   font-weight: bold;
   color: #C00
}
input, select, .input {
   padding: 5px;
   font-weight: bold;
   font-size: 1em;
   color: #008040;
   background: #FFFFFF;
   border: 1px dotted #004080;
}

我将您的代码复制到我的文件中并将其粘贴。我试过了，没有成功。这是第四个环节的问题。我无法修复它。

4

2 回答 2

0

在 style.css 中的#navigation 下添加

text-align: center;
于 2013-10-15T02:48:25.350 回答
0

在此处查看您的代码：http: //jsfiddle.net/QWdy3/看来您的 navitems 不适合容器。这是由于您为元素ul提供了填充边框。li

因此，首先让我们稍微缩小元素并删除填充：

#navigation ul {padding-left:0;}
#navigation li {
   border-left: 1px solid #999;
   float: left;
   width: 185px;
   list-style: none;
}

如此处所示：http: //jsfiddle.net/QWdy3/1/

这似乎是你所追求的。

于 2013-10-15T04:34:03.537 回答