时间戳

首页 > 解决方案 > 如何在不显示空格的情况下使用 CSS 在 HTML 中对齐元素（部分与标题）

html - 如何在不显示空格的情况下使用 CSS 在 HTML 中对齐元素（部分与标题）

问题描述

body{
	margin: 0;
	padding: 0;
}

header{
	width: 100%;
	height: 20%;
	box-sizing: border-box;
	background-color: #BDF7EC;
	background-image: url('../images/flywheel.jpg');
	background-size: cover;
	padding: 2% 5% 2% 5%;
	text-align: center;
}

h1{
	text-align: center;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 150%;
}

h2{
	font: bold 150% Arial, Verdana;
}

p{
	font: 100% Arial, Verdana;
}

nav a{
	color:#0B0B0B;
	background: #f0f4f4;
	display: inline-block;
	width: 13%;
	text-decoration: none;
	padding: 1.5% 0;
	text-align: center;
	border-radius: 4px;
	margin: 1% 5% 1% 5%;
}
.active {
	background:#ffffff;
	color: #111109;
}
a:hover{  
    background: #B3B3B3;
    color: #0006CC;
}

a:focus{ 
    background: #ff8080;
    color: #ffffff;
}

a:active{ 
    border: 3px solid #000000;
}

.left{
	float: left;
	width: 20%;
	height: 500px;
	box-sizing: border-box;
	margin-right: 3%;
	display: inline-block;
	background: #3CA230;
	text-align: center;
}

img{
	display: block;	
	width: 60%;
	border: 2px solid #000000;
	margin: 0 auto;
	margin-bottom: 2%;
	margin-top: 2%;
}

.right{
	width: 80%;
	height: 500px;
	box-sizing: border-box;
}

/*The table should be styled using at least four properties*/  
.right table{
	width: 70%;
	font-family: Arial, Helvetica;
	line-height: 150%;
	text-align: center;
}

/*The table elements < td > should be styled using at least four properties*/
.right table td{
	font-family: Arial, Helvetica;
	line-height: 150%;
	text-align: center;
}

/*Set the opacity of the table rows to a value between .6 and .8 (make sure it is still visible)*/
.right table tr{
	background-color: #66ff66;
	padding: 2%;
	opacity: 0.8;
}

/*Change the opacity of a row when it is hovered over*/
.right table tr:hover{
	opacity: 1;
}

/*The table headings should have a border, background color, and at least one other property.*/
/* (Are ONLY the corners of the table styled?)*/
.right table th{
	border: solid #00ff00;
	border-width: thin thin thick thin;
	padding: 2%;
	color: #ffffff;
	background-color: #008000;
	background-image: linear-gradient(#1aff1a, #004d00);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

/*Style the table so that the text in the first column is left-aligned and the text in the other two columns is centered*/
.right table tr td:first-child{
	text-align: left;
	padding-left: 2%;
}
.right table tr th:first-child{
	text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ultimate Frisbee - History</title>
	<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
	<header>
		<h1>Ulimate Frisbee History</h1>
		<nav>
			<a href="index.html">Home</a>
			<a href="teams.html">Teams</a>
			<a href="history.html" class = "active">History</a>
			<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
		</nav>
	</header>
		<main>
			<aside class = "left">
			<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>

			<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>


			<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
		</aside>
		<section class = "right">

	<h2>Background</h2>
	<p>Ultimate Frisbee/Ultimate has been around in some fashion since the 1960s.  Joel Silver is credited with introducing the game to his high school in 1968 after learning about the game at summer camp.  The game spread to more college campuses soon afterward.</p>
	<p>The Ultimate Players Association was founded in 1979 and began organizing touraments across the country.  In 2010, UPA because the <a href = "htpp://http://www.usaultimate.org/index.html">USA Ultimate</a>.</p>
	<p>Other than professional tournaments, games of Ultimate are typically played without referess.  Instead, players rely on "The Spirit of the Game" to encourage sportsmanship and self-officiating.</p>
	<h2>Sources</h2>

	<ul>
		<li><a href = "https://en.wikipedia.org/wiki/Ultimate_(sport)">Ultimate (sport)</a></li>
		<li><a href = "http://www.wfdf.org/">World Flying Disc Federation</a></li>
	</ul>
	</section>
</main>
</body>
</html>

我无法更改 HTML，只能更改 CSS。我希望标题下方没有间隙/空间（在 .left 和 .right 部分上方）。目前两者之间存在非常明显的差距，我希望它们能够相互平齐。预警 - 我是业余爱好者，这里的第一个问题，所以基本代码将不胜感激，非常感谢

我检查了我的边距（没有相关的边距似乎是一个问题）并将所有元素设置为“边框框”，我主要使用高度和宽度的百分比。HTML 和 CSS 都很长，所以没有粘贴完整的代码，只是相关的 CSS。HTML 有标题，除了类 .left 的部分和类 .right 的另一个部分。如果我遗漏了您需要的内容，请告诉我，谢谢

header{
width: 100%;
height: 20%;
box-sizing: border-box;
background-color: #BDF7EC;
background-image: url('../images/flywheel.jpg');
background-size: cover;
padding: 2% 5% 2% 5%;
text-align: center;

}

.left{
float: left;
width: 20%;
height: 500px;
box-sizing: border-box;
margin-right: 3%;
display: inline-block;
background: #3CA230;
text-align: center;

}

.right{
width: 80%;
height: 500px;
box-sizing: border-box;

}

标签： htmlcsslayout

解决方案

这是由于您在.right类的部分中的h2自动设置为block，这会占用所有可用的width和height。

要解决 此问题，您只需将h2的显示设置为display:inline-block。

推荐阅读