Question

因此，原谅我是一个非常新的，没有经验的人，答案可能是显而易见的。

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

我不确定为什么？任何人都有任何想法？这是#main-content正在起作用，但我已经包含了所有代码（减去每个部分内部的写作），以防它可能影响它。我知道，我知道，我很无能为力。我喜欢它像1200px一样宽，就像#masthead中的bg一样，填充整个区域的文字。

    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>

更新：我添加了明确的内容：主要内容，它修复了文本定位问题。然而，现在整个主要内容div向下移动了几英寸。有什么想法？

这是一个jsFiddle： http://jsfiddle.net/r7yCa/

Answer 1

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

 clear: both;

到css中的#main-content：

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

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

1 个答案: