如何在 header 中设置 link 的底部位置

Question

如何将 link 元素的位置设置到 header 的底部？

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，但结果是 header 的不同高度。如果我将边距或填充设置为 200 像素，我会得到 header 更高的 200 像素。

Answer 1

只需将 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>

Answer 2

如果您将 position:relative 添加到 header 并将 position:absolute 添加到 link 属性，那么 bottom:0 将如您所愿地工作。

header {
  height: 200px;
  width: 100%;
  padding-left: 500px;
  background-color: grey;
  border-bottom: solid blue 6px;
  position:relative;
}

a {
  position:absolute;
  bottom:0;
  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>

Answer 3

首先你需要为你的 header 设置一个 position，在本例中它将是 relative。
其次，您必须使用一个容器来防止您的 link 散架。我将其命名为 .menuHolder，这将包含所有菜单 link。

然后为了将它们放在页眉底部，您需要在 link 容器上设置一个 absolute 位置。在这种情况下 .menuHolder 又一次；这是因为我们不希望 link 彼此自由分离，我们希望它们留在原地。

header {
 height: 200px;
 width: 100%;
 padding-left: 500px;
 background-color: grey;
 border-bottom: solid blue 6px;
 position: relative;   /* RELATIVE POSITION ON HEADER TO KEEP ANYYTHING WITH ABSOLUTE POS INSIDE IT */
}

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;
}

/* A CONTAINER FOR LINKS WHICH WILL KEEP LINK FROM COLLAPSING INTO EACHOTHER*/
.menuHolder {
 position: absolute; /* TO BE ABLE TO FREELY PLACE IT */
 bottom: 0;/* MAKE IT STICK TO BOTTOM */
 display: block;
}

<header>
 <div class="menuHolder">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
 </div>
</header>

如何在 header 中设置 link 的底部位置

How to set bottom position of a link inside header

html

css

css-position