<p>标签不是正确的</p>

时间：2014-11-05 20:27:27

标签： html css dreamweaver

我将.wrapper作为主要容器，宽度为980px。主容器内的其他<div>宽度为960px。通过使用margin: 0 auto，每个<div>标记将为其主容器保留10px空间。它在我的标题和导航栏中运行良好。但是，当我开始使用#1st_container标记在<p>中输入文字时，此10px空间效果不再有效，文本显示在主容器中。我尝试了一些尝试解决这个问题，但没有一个工作，我不知道是什么导致这个......

我该如何解决？

P.S。它在Dreamweaver中看起来很好，就像它支持的那样，但是一旦我在任何浏览器中查看该网站，这个10px空间就消失了。

body{
	margin:0px;
	padding: 0px;
	background-color: #DDDDDD;
	}

#header h1 {
	/*font-family: "Arial Black", Gadget, sans-serif;*/
	/*font-family: "Veneer" Gadget, sans-serif;*/
	font-family: "Maven pro", sans-serif;
	font-size: 70px;
	font-weight:900;
	line-height:70px;
	text-shadow: 3px 3px 5px rgba(122, 131, 175, 1);
	color:#FFF;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto;
	z-index:1;
}

.wrapper {
	height: 2024px;
	width: 980px;
	margin: 0px auto;
	padding: 0px;
	background-color:#FFF;
}
#header {
	height: 380px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: -20px;
	padding-top: 10px;
	background:url(../image/header_bg.jpg) repeat;	
}
span.profile{
	font-size:50px;
	}
span.head_line{
	background:url(../image/line.png) no-repeat;
	width: 250px;
	height: 10px;
	display: inline-block;
	margin: 0 20px 12px 25px;
	}
span.name {
	color: #b46b6b;
	}
span.this_is{
	font-size: 50px;
	}
#nav {
	height: 40px;
	width: 960px;
	margin: 0 auto;
	background:url(../image/nav_bg.png) repeat;
	text-align: center;
}
#nav ul {
	margin: 0;
	padding-top: 8px;
	}
#nav ul li {
	list-style: none;
	display: inline;
	}

#nav ul li a:link{
	text-decoration: none;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 100;
	color:#4a4949;
	font-family: 'Open Sans', sans-serif;
	padding: 0 30px;
	}
#1st_container {
	width: 960px;
	height: 380px;
	margin: 0 auto;	
}
#2nd_container {
	
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TB hompage</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrapper">
<div id="header"><h1>Hello<br />
					 <span class="this_is">This is</span><br />
                     <span class="name">1st Website</span><br />
                     <span class="head_line"></span>& <span class="head_line"></span><br />
                     <span class="profile">I'm a new beginner</span> </h1>

     	</div><!-- header end -->
<div id="nav">
     	<ul>
        	<li><a href="#">Bref</a>
            <li><a href="#">example</a>
            <li><a href="#">example</a>
            <li><a href="#">example</a>
        </ul>
        </div><!-- navbar end here-->
<div id="1st_container">
<p>here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.</p>

</div>
<div id="2nd_container">here is 2nd content</div>
<div id="3nd_container">here is 3nd content</div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分：2)

您可以设置header和nav元素的宽度 - 您还需要为.1st_container元素设置它。

更新：不，不是这样 - 您的ID是以数字开头的。不能这样做。

http://css-tricks.com/ids-cannot-start-with-a-number/

这是一个应用了修复程序的codepen： http://codepen.io/erquhart/pen/vskep

答案 1 :(得分：0)

首先，你没有像li项目一样关闭一堆标签。你不必给＆lt; br /＆gt; jusr＆lt; br＆gt;足够。然后我删除了身体的css边距，填充属性（要么是一个单独的css，要么是＆lt; p＆gt;像margin：10px

＆＃13;
＆＃13; 
body {
  padding: 0;
  margin: 0;
}
#header h1 {
  /*font-family: "Arial Black", Gadget, sans-serif;*/
  /*font-family: "Veneer" Gadget, sans-serif;*/
  font-family: "Maven pro", sans-serif;
  font-size: 70px;
  font-weight: 900;
  line-height: 70px;
  text-shadow: 3px 3px 5px rgba(122, 131, 175, 1);
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
}
.wrapper {
  height: 2024px;
  width: 980px;
  margin: 0px auto;
  padding: 0px;
  background-color: #FFF;
}
#header {
  height: 380px;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: -20px;
  padding-top: 10px;
  background: url(../image/header_bg.jpg) repeat;
}
span.profile {
  font-size: 50px;
}
span.head_line {
  background: url(../image/line.png) no-repeat;
  width: 250px;
  height: 10px;
  display: inline-block;
  margin: 0 20px 12px 25px;
}
span.name {
  color: #b46b6b;
}
span.this_is {
  font-size: 50px;
}
#nav {
  height: 40px;
  width: 960px;
  margin: 0 auto;
  background: url(../image/nav_bg.png) repeat;
  text-align: center;
}
#nav ul {
  margin: 0;
  padding-top: 8px;
}
#nav ul li {
  list-style: none;
  display: inline;
}
#nav ul li a:link {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 100;
  color: #4a4949;
  font-family: 'Open Sans', sans-serif;
  padding: 0 30px;
}
#first_container {
  width: 960px;
  height: 380px;
  margin: 0 auto;
}
p {
  margin:0 10px;
}
＆＃13; 
<div class="wrapper">
  <div id="header">
    <h1>Hello<br>
					 <span class="this_is">This is</span><br>
                     <span class="name">1st Website</span><br>
                     <span class="head_line"></span>& <span class="head_line"></span><br>
                     <span class="profile">I'm a new beginner</span> </h1>

  </div>
  <!-- header end -->
  <div id="nav">
    <ul>
      <li><a href="#">Bref</a>
      </li>
      <li><a href="#">example</a>
      </li>
      <li><a href="#">example</a>
      </li>
      <li><a href="#">example</a>
      </li>
    </ul>
  </div>
  <!-- navbar end here-->
  <div id="firstst_container">
    <p>here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.here is the 1st content.</p>

  </div>
  <div id="second_container">here is 2nd content</div>
  <div id="third_container">here is 3nd content</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题