我对已有的导航栏做了几处更改。由于更改，我无法让红色的“请求报价”按钮在中间垂直对齐以与导航中的其他元素对齐。
我所做的更改是将链接环绕在列表项周围，以便移动版本可以点击整个空间。以前，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>最佳答案
我之前解释的修订答案，只需删除 nav-pop 中的 margin-top 并添加:
#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>关于html - 问题是让导航栏中的不同元素垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51029136/