Html 以三列布局为中心
我在使用谷歌浏览器运行这段代码时遇到了麻烦（我还没有测试过其他浏览器）。当它显示时，常规段落显示在最左边，即使它们应该居中，链接显示背景中的空白，就像我在MS Word中突出显示字母一样。我已将填充设置为0以尝试修复此问题，但没有效果。我做错了什么Html 以三列布局为中心,html,css,padding,centering,margins,Html,Css,Padding,Centering,Margins,我在使用谷歌浏览器运行这段代码时遇到了麻烦（我还没有测试过其他浏览器）。当它显示时，常规段落显示在最左边，即使它们应该居中，链接显示背景中的空白，就像我在MS Word中突出显示字母一样。我已将填充设置为0以尝试修复此问题，但没有效果。我做错了什么 <html> <head> <link rel="stylesheet" type="text/css" href="My Chars.css"> <title>My Chars</title&
<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>
JSFIDLE示例-好吧，我认为您的代码中有一些改进点 e、 g.跨度标记是内联元素，因此不应在其中插入块元素。尝试改用div-或p-标记
请注意，还有一个新的css显示属性称为内联块，它通常是浮点的一个非常好的替代方法，并且在以后的网站上造成的麻烦要小得多
（） 因此，除非我没有正确实现您的目标，否则我认为切换到块元素将解决您的许多问题。
（如果您不想重写html，也可以使用display:block first进行检查）您是否可以根据需要绘制布局。我尝试在JSFIDLE上运行您的代码，但不知道。你好，谢谢你的建议。问题是我在height中定义了“default”类：100%，所以所有的东西都试图显示在那个高度。你可以想象为什么这会是一个问题：-P我现在在页面底部工作，背景过早结束。再次感谢你的建议。
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;
}