我对HTML和CSS还是很陌生，我试图将标题和搜索对齐在同一行，但是我被卡住了。这是HTML：
HTML：
<header>
<h1 id="Heading"><a href="home.html">Welcome Home</a></h1>
<form id="search">
<label for="keywordBox">Search: </label>
<input id="keywordBox" type="text" name="keywordsrch">
</form>
</header>
如何使标题与表格对齐？感谢您的帮助！
旧方法是像这样浮动标头元素：
<style type="text/css">
header > h1,header > form {
float: left;
}
header {
clear: both;
}
</style>
或者，更现代，可以说更好的方法是使用CSS网格来做到这一点，就像这样：
<style type="text/css">
header {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
值1fr表示“一个弹性单位”，并且与其他弹性单位成比例。因此，在这种情况下，它相当于50％50％。
header {
padding: 10px;
}
#heading,#search {
display: inline-block;
margin: 0;
}
#search {
float: right;
}<header>
<h1 id="heading"><a href="home.html">Welcome Home</a></h1>
<form id="search">
<label for="keywordBox">Search: </label>
<input id="keywordBox" type="text" name="keywordsrch">
</form>
</header>,
body{
margin: 0px;
}
header{
padding: 0px 15px;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: space-between;
}
#search {
margin: 0px;
}<header>
<h1 id="Heading"><a href="home.html">Welcome Home</a></h1>
<form id="search">
<label for="keywordBox">Search: </label>
<input id="keywordBox" type="text" name="keywordsrch">
</form>
</header>