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，但是结果是标题的高度不同。如果我将边距或填充设置为200px，则标题会提高200px。

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>

Answer 2

首先，您需要为position设置一个header，在这种情况下，它将为relative。
其次，您将必须使用容器来防止链接崩溃。我将其命名为.menuHolder，它本身具有所有菜单链接。

然后为了将它们放置在标题的底部，您需要在链接容器上设置absolute位置。在这种情况下，.menuHolder再一次；这是因为我们不希望链接之间相互独立，而是希望它们保持原位。

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>

Answer 3

如果您将position：相对于标头和position：absolute添加至链接属性，则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>

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

3 个答案: