header {
height: 200px;
width: 100%;
padding-left: 500px;
background-color: grey;
border-bottom: solid blue 6px;
}
a {
display: block;
float: left;
width: 125px;
height: 50px;
border: solid blue 2px;
padding-left: 2px;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 50px;
color: white;
background-color: black;
}<header>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</header>我试图设定最低点：0;但没有结果.我也尝试了margin-top和padding-top,但是结果是标题的高度不同.如果我将边距或填充设置为200px,则标题会提高200px.
最佳答案
只需将header的CSS编辑为：
header{
height: 200px;
width: 100%;
padding-left: 500px;
background-color: grey;
border-bottom: solid blue 6px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
}
a {
display: block;
float: left;
width: 125px;
height: 50px;
border: solid blue 2px;
padding-left: 2px;
border-radius: 15px 15px 0px 0px;
text-align: center;
line-height: 50px;
color: white;
background-color: black;
}<header>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</header>