我无法使用 Google Chrome 运行这段代码(我没有测试过其他浏览器)。当它显示时，常规段落显示在最左边，即使它们应该居中，并且链接在背景中显示间隙，就好像我在 MS Word 中突出显示了字母一样。我已将填充设置为 0 以尝试解决此问题，但无济于事。我做错了什么？
<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/
最佳答案
好吧，我认为您的代码中有一些改进点。
例如span-tags 是行内元素，因此不应在其中插入 block 元素。尝试改用 div 或 p 标签!
请注意，还有一个名为 inline-block 的新 css-display-property，它通常是 float 的一个非常巧妙的替代品，并且以后在网站上造成的麻烦要少得多。
( http://bittersmann.de/articles/inline-block/ )
所以，除非我没有达到你的目标，否则我认为切换到 block 元素将解决你的很多问题。
(如果你不想重写你的 html，你也可以先用 display:block 检查这个)
关于html - 居中 3 列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13238166/