2

1) Пытаюсь сверстать navbar на flexbox, на float-ах было бы проще сделать то, что я хочу, но стараюсь всё делать именно на flexbox. Так вот, вопрос: можно ли как-то переместить отдельный элемент в правый угол его контейнера? Но сделать это на flexbox и при этом дополнительно его ни во что не оборачивать. Здесь мне нужно элемент "item" переместить вправо, в конец. И да, почему над "HOME" есть чёрные отступы, он должен быть на полную высоту.введите сюда описание изображения 2) Думал отодвинуть его на margin-left, но было бы правильно это делать, или если это сделать, и задать конкретное кол-во пикселей, то у разных мониторов будет выглядеть по-разному? И какими единицами измерения лучше пользоваться? Читал, что "px" лучше не надо.

.header, .topnav {
	width: 100%;
	background-color: black;
	display: flex;
	align-items: center;
}

.topnav a:hover {
  	background-color: #ddd;
  	color: black;
}

.topnav a {
	font-size: 20px;
	color: white;
	padding: 10px;
}

#active {
	background-color: green;
}

.icon {
	display: none;
}
<header class="header">
		<div class="topnav">
			<a href="#" class="hrefs" id="active">Home</a>
			<a href="#" class="hrefs">News</a>
			<a href="#" class="hrefs">Contacts</a>
			<a href="#" class="hrefs">About</a>
			<b><a href="javascript:void(0);" class="icon" onclick="openCity()">&#9776;</a></b>
		</div>
	</header>

3 ответа 3

3

Можете задать свойство flex-grow для контейнера, обрамляющего последний элемент списка, и выровнять текст по правому краю.

.topnav {
  background-color: black;
  display: flex;
  padding-left: 0px;
  list-style: none;
}
li {
  color: white;
  padding: 10px;
}
li a {
  color: white;
}
.active {
  background-color: #5DB97D;
}
.menuBurger {
  flex-grow: 1;
  text-align: right;
}
<ul class="topnav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">About</a></li>
  <li class="menuBurger"><a href="#">menu</a></li>
</ul>

2
  • Сначала не получалось, как Вы сказали, но потом оказалось, что передвигаться ему мешал тег <b>, я то думал он ничего не решает, просто жирнее текст делает, а он выступил неким контейнером для "icon". Большое спасибо Вам! 17 дек 2017 в 17:06
  • Ссылки мелкие :(
    – Qwertiy
    17 дек 2017 в 21:40
1

.header, .topnav {
  width: 100%;
  background-color: black;
  display: flex;
  align-items: center;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a {
  font-size: 20px;
  color: white;
  padding: 10px;
}

#active {
  background-color: green;
}

.topnav a:last-child {
  order: 2;
}

.topnav:before {
  content: "";
  flex: 1 0 0px;
  order: 1;
}
<header class="header">
  <div class="topnav">
    <a href="#" class="hrefs" id="active">Home</a>
    <a href="#" class="hrefs">News</a>
    <a href="#" class="hrefs">Contacts</a>
    <a href="#" class="hrefs">About</a>
  </div>
</header>

1

Да, маржином слева как раз можно, просто напишите margin-left: auto; Насчет полоски у меню - у Вас все items находятся по центру, и высота блока НОМЕ не растягивается, а такая, как есть, либо напишите align-self: stretch; либо добавьте паддингов, или с высотой поиграйтесь.

1
  • 1
    Спасибо, большое, помогло!) 18 дек 2017 в 12:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.