我無法讓此代碼使用谷歌瀏覽器運行(我還沒有測試過其他瀏覽器)。顯示時,常規段落顯示在最左側,即使它們應居中,並且鏈接顯示背景中的空白,就好像我突出顯示了MS Word中的字母。我已經將填充設置爲0來嘗試和補救這一點,但無濟於事。我究竟做錯了什麼?居中3列布局
<html>
<head>
<link rel="stylesheet" type="text/css" href="My Chars.css">
<title>My Chars</title>
</head>
<body>
<!--Defines the general styles for the page-->
<span class = "default" style = "float:left; background-image:url('Paper Mache.jpg'); width:100%; height:100%">
<!--Empty header-->
<div id = "header" style = "height:50px; width:100%; align:top">
</div>
<br />
<!--Left links panel-->
<span class = "default" style = "width:50px; padding:0px;">
<a href = "original.html">Original Chars</a>
<br />
<a href = "updated.html">Updated Chars</a>
<br />
<a href = "blended.html">Blended Chars</a>
</span>
<br />
<!--Main body text-->
<span class = "default">
<div class = "section_head">
My character site
</div>
<span class = "default">
This site is dedicated to the various ideas I've had regarding various characters over the years. The site is divided into three main sections, based on where my input starts and stops. These divisions are:
</span>
<ul class = "default">
<li>
<div style = "font-weight:bold">
Original Characters
</div>
These are characters created "from scartch". I designed almost everything, from the name to the costume to the character's background, powers, skills, weapons, etc.
</li>
<li>
<div style = "font-weight:bold;">
Updated Characters
</div>
These are existing charactes whose backstories, skills, and/or powers have been altered to reflect the times, make a more logical or cohesive origin --especially with respect to an archenemy or to merge several versions of that character together.
</li>
<li>
<div style = "font-weight:bold;">
Blended Characters
</div>
These are two or more different characters that have similar or shared elements in terms of backstory, character themes/arcs, powers/skills/abilities, etc. that have been mixed together so that the best elements of the individual characters produce a new, better "combination character."
</li>
</ul>
<span class = "default">
In addition to these three main sections, there are subsections for heroes and villains and supporting cast. There are also divisions between "universes," e.g. DC comics universe vs a movie's universe.
</span>
<!--Closing th main body-->
</span>
<!--Closing the main page details-->
</span>
</body>
</html>
在外部樣式表:
body
{
margin: 0;
}
.default
{
width: 800px;
height: 100%;
background-color: white;
margin-left: auto;
margin-right: auto;
}
.section_head
{
background-color: white;
font-size: large;
font-weight: bold;
text-align: center;
width: 800px;
margin-left:auto;
margin-right: auto;
}
a:link
{
color: red;
font-weight: bold;
padding: 0;
margin: 0;
}
的jsfiddle例子 - http://jsfiddle.net/L9LvS/
你能否畫一個你期望的佈局。我試圖在jsfiddle上運行你的代碼,但不知道。問候, – Wilf