如何阻止我的標題被歪曲？（HTML/CSS）

-1

我的頭問題。我的網站歪斜我的鏈接。我認爲它是style.css，所以我嘗試了我的style.css，但沒有成功。我是.css的初學者。這裏是我的網站的圖片： enter image description here 如何阻止我的標題被歪曲？（HTML/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  : [email protected] 
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; 
}

我複製你的代碼，我的文件，並粘貼上。我試過了，沒有成功。這是第四個環節是問題。我無法修復它。

來源

2013-10-15 Mike

我不確定你的意思是鏈接是歪斜的。你能澄清一下你期待他們的樣子嗎？ –

歪斜對此不正確。對於措辭我很抱歉。「骰子」鏈接比「家」，「計算器」和「樂透號碼」鏈接寬。我只是希望他們的尺寸相同。第四個環節'骰子'是最後一個環節。 – Mike

在這裏撥弄你的代碼看：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-15 04:34:03

非常感謝。我很感激。再說明？ 8） – Mike

下你的style.css #navigation添加

text-align: center;

來源

2013-10-15 02:48:25 ElefantPhace

並不那麼簡單。這是我更新的圖片。在頁面上。 – Mike

這是非常不明確的，你真的要求... – ElefantPhace

對於措辭我很抱歉。「骰子」鏈接比「家」，「計算器」和「樂透號碼」鏈接寬。我只是希望他們的尺寸相同。第四個環節'骰子'是最後一個環節。我該怎麼做才能獲得四個鏈接的相同結果？重新調整整個鏈接的大小？ – Mike

如何阻止我的標題被歪曲？ （HTML/CSS）

回答

相關問題

如何阻止我的標題被歪曲？（HTML/CSS）