我的</p> <div>中的<p>标签不会在一行中显示文字？

时间：2015-09-25 01:16:20

标签： html css

我正在建立一个网站，我想在左上角有一个标识（作为链接），然后是我的页面标题（“Danny Steveson”），浮动到图像的右侧。我也希望文本（“丹尼史蒂文森”）与自己的底部对齐。一切正常，除了它导致页面标题的“文本”自动换行。我想（“丹尼史蒂文森”）出现在一条线上。

请帮助我！

这是我的HTML：

	html 		{
				color: white;
				}
	body 		{
				background-image: url("images/background.jpg");
				background-attachment: fixed;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				}
	#container  {
				background-color: rgb(67, 67, 67);
				max-width: 90%;
				max-height: 100%;
				margin: 0 auto;
				opacity:0.88;
				}
	#header 	{
				max-width: 100%;
				}
	#logo 		{
				float: left;
				padding: 3px;
				}
	#top_info   {
				float: left;
				max-width: 100%;
				height: 106px;
				margin: 0 auto;
				position: relative;
				}
	#topHeaderText
				{
				position: absolute;
				bottom: 0;
				}
	#topNavBar  {
				clear: both;
				max-width: 90%;
				margin: 0 auto;
				border-top: 2px solid DarkKhaki;
				border-bottom: 2px solid DarkKhaki;
				background-color: black;
				opacity:0.7;
	      		}
	#topNavBar ul
				{
				text-align: center;
				padding: 0;
				margin: 12px 0;
				}
	#topNavBar li
				{
				display: inline;
				}
	#topNavBar li a
				{
				color: white;
				text-align: center;
				text-decoration: none;
				padding: 20px;
				}
	#topNavBar a:hover
				{
				color: DarkKhaki;
				}
	#content_area
				{
				background-color: black;
				opacity:0.7;
				max-width: 90%;
				margin: 0 auto;
				border: 2px solid DarkKhaki;
				}
	#content_header
				{
				color: DarkKhaki;
				text-align: center;
				}
	#content_Text
				{
				text-align: center;
				}
	#footer     {
				background-color: black;
				opacity:0.7;
				max-width: 90%;
				margin: 0 auto;
				border-left: 2px solid DarkKhaki;
				border-top: 2px solid DarkKhaki;
				border-right: 2px solid DarkKhaki;
				}
	#footer p   {
				font-size: .7em;
				max-width: 100%;
				padding: 3px;
				margin: 0 auto;
				}
				
<!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>Danny Steveson Portfolio</title>
	<link rel="stylesheet" type="text/css" href="DannyStevesonPortfolio.css" />
	<link rel="icon" type="image/png" href="titleLogo.png" />
</head>

<body>
<!-- Container -->
	<div id="container">
<!-- Header -->
    	<div id="header">
        	<div id="logo">
            	<a href="default.html" title="Home Page">
					<img src="images/logo.png" alt="Logo">
					</a>
            </div>
           	<div id="top_info">
                	<span id="topHeaderText">Danny Steveson</span>
            </div>
            <div id="topNavBar">
            	<ul>
  					<li><a href="webDesign.html">Web Design</a></li>
  					<li><a href="gameDesign.html">Game Design</a></li>
					<li><a href="databases.html">Databases</a></li>
					<li><a href="resume.html">Resume</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
            </div>
        </div>
        <br />
<!-- Content Area -->        
        <div id="content_area">
            <div id="content_header">
            	<h1>Welcome to my portfolio!</h1>
            </div>
            <div id="content_Text">
            	 <p>
						My Name is Danny Steveson. I have recently earned a Bachelor's Degree<br />
						of Computer Science with a G.P.A. of 3.76. I am an extremely hard-working<br />
						and driven individual that is currently seeking new opportunities.<br /> 
						<br />
						I am passionate about programming with HTML, HTML5, XHTML, CSS, and JavaScript.<br />
						I have a basic understanding of relational databases and enjoy programming with<br />
						SQL as well. I also have some knowledge of PHP, .NET, Action Scripting and C#.<br />
						<br />
						In addition to programming, I have a background in computer 3-D/2-D art<br />
						applications and concepts. 
               	</p>
            </div>
        </div>
        <br />
        
<!-- Footer -->
        <div id="footer">
        	<p>Created by: Danny Steveson 2015</p>
        </div>
<!-- END Container -->
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

除了移除浮动之外，您可以使用＆＃39; white-space：nowrap强制文本不换行;＆＃39;规则

#topHeaderText {
  position: absolute;
  bottom: 0;
  white-space:nowrap;
}

答案 1 :(得分：0)

从float:left班级中移除#top_info。

html 		{
				color: white;
				}
	body 		{
				background-image: url("images/background.jpg");
				background-attachment: fixed;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				}
	#container  {
				background-color: rgb(67, 67, 67);
				max-width: 90%;
				max-height: 100%;
				margin: 0 auto;
				opacity:0.88;
				}
	#header 	{
				max-width: 100%;
				}
	#logo 		{
				float: left;
				padding: 3px;
				}
	#top_info   {
				max-width: 100%;
				height: 106px;
				margin: 0 auto;
				position: relative;
				}
	#topHeaderText
				{
				position: absolute;
				bottom: 0;
				}
	#topNavBar  {
				clear: both;
				max-width: 90%;
				margin: 0 auto;
				border-top: 2px solid DarkKhaki;
				border-bottom: 2px solid DarkKhaki;
				background-color: black;
				opacity:0.7;
	      		}
	#topNavBar ul
				{
				text-align: center;
				padding: 0;
				margin: 12px 0;
				}
	#topNavBar li
				{
				display: inline;
				}
	#topNavBar li a
				{
				color: white;
				text-align: center;
				text-decoration: none;
				padding: 20px;
				}
	#topNavBar a:hover
				{
				color: DarkKhaki;
				}
	#content_area
				{
				background-color: black;
				opacity:0.7;
				max-width: 90%;
				margin: 0 auto;
				border: 2px solid DarkKhaki;
				}
	#content_header
				{
				color: DarkKhaki;
				text-align: center;
				}
	#content_Text
				{
				text-align: center;
				}
	#footer     {
				background-color: black;
				opacity:0.7;
				max-width: 90%;
				margin: 0 auto;
				border-left: 2px solid DarkKhaki;
				border-top: 2px solid DarkKhaki;
				border-right: 2px solid DarkKhaki;
				}
	#footer p   {
				font-size: .7em;
				max-width: 100%;
				padding: 3px;
				margin: 0 auto;
				}
<!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>Danny Steveson Portfolio</title>
	<link rel="stylesheet" type="text/css" href="DannyStevesonPortfolio.css" />
	<link rel="icon" type="image/png" href="titleLogo.png" />
</head>

<body>
<!-- Container -->
	<div id="container">
<!-- Header -->
    	<div id="header">
        	<div id="logo">
            	<a href="default.html" title="Home Page">
					<img src="images/logo.png" alt="Logo">
					</a>
            </div>
           	<div id="top_info">
                	<span id="topHeaderText">Danny Steveson</span>
            </div>
            <div id="topNavBar">
            	<ul>
  					<li><a href="webDesign.html">Web Design</a></li>
  					<li><a href="gameDesign.html">Game Design</a></li>
					<li><a href="databases.html">Databases</a></li>
					<li><a href="resume.html">Resume</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
            </div>
        </div>
        <br />
<!-- Content Area -->        
        <div id="content_area">
            <div id="content_header">
            	<h1>Welcome to my portfolio!</h1>
            </div>
            <div id="content_Text">
            	 <p>
						My Name is Danny Steveson. I have recently earned a Bachelor's Degree<br />
						of Computer Science with a G.P.A. of 3.76. I am an extremely hard-working<br />
						and driven individual that is currently seeking new opportunities.<br /> 
						<br />
						I am passionate about programming with HTML, HTML5, XHTML, CSS, and JavaScript.<br />
						I have a basic understanding of relational databases and enjoy programming with<br />
						SQL as well. I also have some knowledge of PHP, .NET, Action Scripting and C#.<br />
						<br />
						In addition to programming, I have a background in computer 3-D/2-D art<br />
						applications and concepts. 
               	</p>
            </div>
        </div>
        <br />
        
<!-- Footer -->
        <div id="footer">
        	<p>Created by: Danny Steveson 2015</p>
        </div>
<!-- END Container -->
    </div>
</body>
</html>

相关问题
最新问题