在导航栏中获取不同元素以垂直对齐的问题
我对导航栏进行了几处更改。由于更改，我无法获得红色的“请求报价”按钮在中间垂直对齐以与导航中的其他项目对齐。
我所做的更改是将链接包装在列表项周围，以便整个版本对于移动版本都是可单击的。以前，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 :(得分：2)
对我先前的解释的修改后的答案，只需删除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>
答案 1 :(得分：1)
首先，让li成为ul的孩子，而不是主播。
删除了nav-pop的最高利润。
添加的显示：flex和align-items：导航列表的中心。
将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>
答案 2 :(得分：0)
为了完全了解您的public class Result {
public static void main(String[] args) {
// TODO Auto-generated method stub
/*A a = new A();
a.m1();
B b = new B();
b.m1();
b.m2();
*/
A ab = new B();
ab.m1();
}
，我从navbar中删除了margin-top，这是不必要的。然后通过添加以下内容来更改#nav-pop id id（因为它是容器）：
nav-list为我提供所需的显示内容：
答案 3 :(得分：0)
我注意到的第一个问题是您的ul #nav-list的页边距可能会影响您的对齐方式，但最重要的问题是#quoteButton的高度与以下行不符：其余链接的高度（因为未设置）。由于元素的高度不同，这将导致vertical-align: middle无法正常工作。
当我将每个<li>的行高设置为44px时，它们会完美对齐。对我来说，@ billy.farroll建议的答案是不够的，因为按钮文本与<li> s不一致。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？