Question

我的标题出了问题。我的网站是我的链接歪斜。我认为这是style.css，所以我尝试了我的style.css并没有成功。我是.css的初学者。这是我网站的图片： enter image description here

这是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;
}

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

Answer 1

在你的style.css中的#navigation中添加

text-align: center;

Answer 2

在这里查看你的代码：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/

这似乎就是你追求的目标。

如何阻止我的标题歪斜？（HTML / CSS）

2 个答案:

如何阻止我的标题歪斜？ （HTML / CSS）

2 个答案:

如何阻止我的标题歪斜？（HTML / CSS）