Проблема с получением различных элементов в навигационной панели для выравнивания по вертикали - PullRequest
Новая
       22

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

0 голосов
/ 25 июня 2018

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

Что я изменил, так это обернул ссылку вокруг элемента списка так, чтобывсе пространство будет кликабельно для мобильной версии.Ранее 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>

Ответы [ 4 ]

0 голосов
/ 25 июня 2018

Исправленный ответ моего предыдущего объяснения, просто удалите верхнюю границу в 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>
0 голосов
/ 25 июня 2018

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

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

Добавлено отображение: flex и align-items: center в nav-list.

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

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>
0 голосов
/ 25 июня 2018

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

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

0 голосов
/ 25 июня 2018

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

#nav-list {

display: flex;
align-items: center; 

}

Дав мне нужный вам дисплей:

enter image description here

...