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 aside 和 .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;
最佳答案
这是因为你的 h2 在类 .right 的部分内被自动设置为 block 这会吃光所有可用的宽度和高度。
要修复 问题，您只需将h2 的显示设置为display:inline-block .
关于html - 如何使用不显示空格的 CSS 对齐 HTML 中的元素(部分与标题)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56720443/