在div中定位文本似乎是随机添加填充



因此,请原谅我在这方面非常新手和缺乏经验,答案可能是显而易见的。

出于某种原因,我的布局中的"main content"div(将是正文)中的文本看起来像是在添加填充或左侧的东西,但我在css中没有任何内容。容器在页面上的宽度和位置都是正确的,但其中的所有文本都以200px左右开始,就像每一行都有缩进一样。

我不知道为什么?有人知道吗?这是#主要内容,但我已经包含了所有的代码(减去每一节中的文字),以防影响它。我只希望它像#刊头中的bg一样宽1200像素,文本填充整个区域。

body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background-color: #333333;
padding: 0px;
margin: 0px;}
#container {
background-color: #333333;
width: 1200px;
margin: 10px auto 10px auto;}
#masthead {
background-position: center;
height: 500px;
width: 1200px;
background-image: url('banner.jpg');
background-color: #ffffff;
background-repeat: no-repeat;}
#left-nav {
text-align: left;
position: relative;
top: -400px;
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: 2px solid #000000;
color: #FFFFFF;
font-family: corbel, helvetica, arial;
font-size: 14px;
font-weight: normal;
height: auto;
line-height: 11px;
text-shadow: 0 0 3px #8D6D6F;
background-color: #333333;
left: 20px;
opacity: 0.8;
filter: Alpha(opacity=80); /* IE8 and earlier */;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;}
#main-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
width:1200px;}
#right-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
width:200px;}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0 px;
text-align: center;}
#top-nav ul {
text-align: center;
list-style-type: none;
margin: 0px;
padding: 0px;}
#top-nav ul li {
opacity: 1.0;
display: inline;}
#top-nav ul li a {
color: #000000;
font-family: Impact, Charcoal, sans-serif;
background-color: #CCCCCC;
padding: .2em 1em .2em 1em;
opacity: 1;
filter: Alpha(opacity=100); /* IE8 and earlier */;}
#top-nav ul li a:hover {
border-color: 99BF99;
color: #000000;
background-color: CCFFCC;
border-width: 1px;
border-style: solid;}
h1 {
font: 30px Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;}

这是html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<link href="mycss.css" rel="stylesheet" type="text/css"/>
</head> 
<body>
<div id="container">
<div id="masthead"></div>
<div id="top-nav"></div>
<div id="left-nav"></div>
</div>
<div id="main-content"></div>
<div id="footer"></div>
</body> 
</html>

更新:我在主要内容中添加了clear:,这修复了文本定位问题。然而,现在整个主要内容div向下移动了几英寸。对此有什么想法吗?

这里有一个jsFiddle:http://jsfiddle.net/r7yCa/

我已经复制了您的问题,认为您需要添加

clear: both;

到css中的#主要内容:

#main-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
clear: both;
width:1200px;}

最新更新