Проблема с выравниванием различных элементов на панели навигации по вертикали

Я внес несколько изменений в имеющуюся у меня панель навигации. После внесения изменений я не могу заставить красную кнопку «Запросить цену» вертикально выровняться посередине, чтобы выровняться с другими элементами на панели навигации.

Что я изменил, так это обернул ссылку вокруг элемента списка, чтобы все пространство было интерактивным для мобильной версии. Раньше html выглядел так:

<li><a href = "">LEARN</a></li>

и я бы использовал #nav-list li a для вызова элементов, потому что в тот момент я не назначал класс.

Кто-нибудь видит, что я делаю не так? Я не хочу использовать position: absolute, если это возможно.

nav {
	background: #FFF;
	height: 70px;
	width: 100%;
	max-width: 100%;
	box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
	position: fixed;
	top: 0;
	z-index: 999;
	box-sizing: border-box;
}
#nav-pop {
	float: right;
	display: block;
	margin-right: 5%;
	margin-top: 25px;
	transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
	opacity: 1;
	background: rgba(0,0,0,0.8);
	background: #2f2f2f;
	right: 0;
	margin-top: 0;
	margin-right: 0;
	z-index: 999999;
	transition: ease 0.6s;-webkit-transition: ease 0.6s;
	transform: translateX(0);-webkit-transform: translateX(0);
	box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
.navItem {
	display: inline-block;
	margin: 0 17px;
	vertical-align: top;
}
.navItem:first-child {
	margin-left: 0px;
}
.navItem:last-child {
	margin-right: 0px;
}
.navItem, #serviceClick {
	text-decoration: none;
	font-family: 'Muli', sans-serif;
	font-size: .9rem;
	color: #747678;
	letter-spacing: 1px;
	vertical-align: top;
	transition: all .3s;-webkit-transition: all .3s;
	cursor: pointer;
}
.navItem:after, #serviceClick:after {
	content: '';
    display: block;
	width: 0;
	margin-top: 6px;
	background: #b82222;
	height: 2px;
	transition: width .3s;
}
.navItem:hover, #serviceClick:hover {
	color: #4b4b4b;
	transition: all .3s;-webkit-transition: all .3s;
}
.navItem:hover:after, #serviceClick:hover:after {
    width: 100%;
    transition: width .3s;
}
.navInverse {
	padding: 10px 12px;
	border-radius: 2px;
	box-sizing: border-box;
	font-family: 'Muli', sans-serif;
	font-size: 1.2rem;
	color: #FFF;
	border: 1px solid #b82222;
	background: linear-gradient(to right bottom, #b82222, #a51e1e);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.navInverse:hover {
	background: #b82222;
	background: #FFF;
	color: #b82222;
}
.navInverse:after {
	content: '';
    display: none;
	width: 0px;
	height: 0px;
	transition: none;
}

<nav>
	<div id = "nav-pop">
		<ul id = "nav-list">
			<a href = "" class = "navItem"><li>ABOUT</li></a>
			<li id = "serviceClick" class = "navItem">SOLUTIONS</li>
			<a href = "" class = "navItem"><li>LEARN</li></a>
			<a href = "" class = "navItem"><li>CONTACT</li></a>
			<a href = "" class = "navInverse navItem" id = "quoteButton"><li>REQUEST QUOTE</li></a>
		</ul>
	</div>
</nav>

html css position alignment

25.06.2018 19:43

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Чтобы получить полное выравнивание на вашем navbar, я удалил margin-top из #nav-pop id, в этом не было необходимости. Затем изменили идентификатор nav-list (потому что это контейнер), добавив следующее:

#nav-list {

display: flex;
align-items: center; 

}

Предоставив мне желаемый дисплей, который вам нужен:

Когда я это делаю, элементы списка идут на самый верх.

— 25.06.2018 19:56

@paul, см. мой фрагмент (новый ответ), вот как он выглядит на моем мониторе, они тоже не выдвигаются наверх. Надеюсь, этот новый пример ответа вам поможет :)

— 25.06.2018 20:03

25.06.2018 19:53

Во-первых, Keep li как дочерний элемент ul not anchor.

Убрано верхнее поле на nav-pop.

Добавлены display: flex и align-items: center в nav-list.

Уменьшено поле после элемента до нуля.

nav {
  background: #FFF;
  height: 70px;
  width: 100%;
  max-width: 100%;
  box-shadow: 0px 6px 15px -4px rgba(0, 0, 0, 0.12);
  position: fixed;
  top: 0;
  z-index: 999;
  box-sizing: border-box;
}

#nav-pop {
  float: right;
  display: block;
  margin-right: 5%;
  transition: ease 0.5s;
  -webkit-transition: ease 0.5s;
}

#nav-pop.active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
  background: #2f2f2f;
  right: 0;
  margin-top: 0;
  margin-right: 0;
  z-index: 999999;
  transition: ease 0.6s;
  -webkit-transition: ease 0.6s;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  box-shadow: -9px 0px 9px 1px rgba(0, 0, 0, .2);
}

.navItem {
  display: inline-block;
  margin: 0 17px;
  vertical-align: top;
}

.navItem:first-child {
  margin-left: 0px;
}

.navItem:last-child {
  margin-right: 0px;
}

.navItem,
#serviceClick {
  text-decoration: none;
  font-family: 'Muli', sans-serif;
  font-size: .9rem;
  color: #747678;
  letter-spacing: 1px;
  vertical-align: top;
  transition: all .3s;
  -webkit-transition: all .3s;
  cursor: pointer;
}

.navItem:after,
#serviceClick:after {
  content: '';
  display: block;
  width: 0;
  margin-top: 0px;
  background: #b82222;
  height: 2px;
  transition: width .3s;
}

.navItem:hover,
#serviceClick:hover {
  color: #4b4b4b;
  transition: all .3s;
  -webkit-transition: all .3s;
}

.navItem:hover:after,
#serviceClick:hover:after {
  width: 100%;
  transition: width .3s;
}

.navInverse {
  padding: 10px 12px;
  border-radius: 2px;
  box-sizing: border-box;
  font-family: 'Muli', sans-serif;
  font-size: 1.2rem;
  color: #FFF;
  border: 1px solid #b82222;
  background: linear-gradient(to right bottom, #b82222, #a51e1e);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.navInverse:hover {
  background: #b82222;
  background: #FFF;
  color: #b82222;
}

.navInverse:after {
  content: '';
  display: none;
  width: 0px;
  height: 0px;
  transition: none;
}

 #nav-list {
  display: flex;
  align-items: center;
}
.navItem a {
  padding: 24px 12px;
}

<nav>
  <div id = "nav-pop">
    <ul id = "nav-list">
      <li href = "" class = "navItem"><a>ABOUT</a></li>
      <li id = "serviceClick" class = "navItem">SOLUTIONS</li>
      <li href = "" class = "navItem"><a>LEARN</a></li>
      <li href = "" class = "navItem"><a>CONTACT</a></li>
      <li href = "" class = "navInverse navItem" id = "quoteButton"><a>REQUEST QUOTE</a></li>
    </ul>
  </div>
</nav>

Я переключил все это в первую очередь так, чтобы привязка вложила элемент списка. Мне нужно, чтобы вся ширина была интерактивной. Не только формулировка списка.

— 25.06.2018 20:02

Проверьте мой обновленный фрагмент .. Я добавил этот стиль .navItem a {padding: 24px 12px; } Это позволит использовать большую область в качестве якоря, не нарушая HTML

— 25.06.2018 20:11

25.06.2018 19:58

Первая проблема, которую я заметил, заключается в том, что ваш ul #nav-list имеет верхний край, который может влиять на ваше выравнивание, но самая важная проблема заключается в том, что высота #quoteButton не соответствует высоте строки остальных ваших ссылок (потому что есть не установлено). Это приведет к неправильной работе vertical-align: middle, поскольку элементы имеют разную высоту.

Когда я устанавливаю высоту линии каждого <li> на 44 пикселя, они идеально выравниваются. Для меня ответа, предложенного @ billy.farroll, недостаточно, поскольку текст кнопки не совпадает с <li>.

25.06.2018 20:00

Ответ принят как подходящий

Пересмотренный ответ моего предыдущего объяснения, просто удалите верхнюю границу в nav-pop и добавьте:

#nav-list {

display: flex;
align-items: center;

}

См. Фрагмент готового вывода:

nav {
	background: #FFF;
	height: 70px;
	width: 100%;
	max-width: 100%;
	box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
	position: fixed;
	top: 0;
	z-index: 999;
	box-sizing: border-box;
}

#nav-list {

display: flex;
align-items: center;

}
 
#nav-pop {
	float: right;
	display: block;
	margin-right: 5%;
    margin-top: 15px;
	transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
	opacity: 1;
	background: rgba(0,0,0,0.8);
	background: #2f2f2f;
	right: 0;
	margin-top: 0;
	margin-right: 0;
	z-index: 999999;
	transition: ease 0.6s;-webkit-transition: ease 0.6s;
	transform: translateX(0);-webkit-transform: translateX(0);
	box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
.navItem {
	display: inline-block;
	margin: 0 17px;
	vertical-align: top;
}
.navItem:first-child {
	margin-left: 0px;
}
.navItem:last-child {
	margin-right: 0px;
}
.navItem, #serviceClick {
	text-decoration: none;
	font-family: 'Muli', sans-serif;
	font-size: .9rem;
	color: #747678;
	letter-spacing: 1px;
	vertical-align: top;
	transition: all .3s;-webkit-transition: all .3s;
	cursor: pointer;
}
.navItem:after, #serviceClick:after {
	content: '';
    display: block;
	width: 0;
	margin-top: 6px;
	background: #b82222;
	height: 2px;
	transition: width .3s;
}
.navItem:hover, #serviceClick:hover {
	color: #4b4b4b;
	transition: all .3s;-webkit-transition: all .3s;
}
.navItem:hover:after, #serviceClick:hover:after {
    width: 100%;
    transition: width .3s;
}
.navInverse {
	padding: 10px 12px;
	border-radius: 2px;
	box-sizing: border-box;
	font-family: 'Muli', sans-serif;
	font-size: 1.2rem;
	color: #FFF;
	border: 1px solid #b82222;
	background: linear-gradient(to right bottom, #b82222, #a51e1e);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.navInverse:hover {
	background: #b82222;
	background: #FFF;
	color: #b82222;
}
.navInverse:after {
	content: '';
    display: none;
	width: 0px;
	height: 0px;
	transition: none;
}

<nav>
	<div id = "nav-pop">
		<ul id = "nav-list">
			<a href = "" class = "navItem"><li>ABOUT</li></a>
			<li id = "serviceClick" class = "navItem">SOLUTIONS</li>
			<a href = "" class = "navItem"><li>LEARN</li></a>
			<a href = "" class = "navItem"><li>CONTACT</li></a>
			<a href = "" class = "navInverse navItem" id = "quoteButton"><li>REQUEST QUOTE</li></a>
		</ul>
	</div>
</nav>

@paul Привет, я отредактировал ответ, что вам нужно в # nav-pop id, чтобы добавить margin-top: 15px; (уменьшить оригинал на 10 пикселей); ---> это в моем новом ответе (фрагмент).

— 25.06.2018 20:22

Идеально. Спасибо!

— 25.06.2018 20:46

Отлично. Рад, что помог тебе.

— 25.06.2018 20:52

25.06.2018 20:01