html - 如何设置标题内链接的底部位置

Question

如何将链接元素的位置设置到页眉底部？

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>

我尝试设置 bottom: 0; 但没有结果。我也尝试过 margin-top 和 padding-top 但结果是标题的高度不同。如果我将边距或填充设置为 200 像素，我会得到 200 像素更高的标题。

Answer 1

只需将标题的 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>