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 that you have read and understand our privacy policy and code of conduct.

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