Как установить нижнюю позицию ссылки внутри заголовка - PullRequest
Новая
       9

Как установить нижнюю позицию ссылки внутри заголовка

0 голосов
/ 07 января 2019

как мне установить положение элементов ссылки в нижней части заголовка? 

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 пикселей.

Ответы [ 3 ]

0 голосов
/ 07 января 2019

Если вы добавите положение: относительно заголовка и положение: абсолютное значение для атрибутов ссылки, то нижняя часть: 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>
0 голосов
/ 07 января 2019

Прежде всего вам необходимо установить 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>
0 голосов
/ 07 января 2019

Просто отредактируйте 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>
...