1
我一直试图在列表中垂直对齐链接，其中所有链接都有背景颜色/边框（看起来像一个按钮）。不同高度的顶部/底部边距的垂直对齐元素
尽管此小提琴上的代码有效，但并不考虑该链接的高度降低（登录链接）。
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
a.button {
height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li><a href="/#">Link 1</a></li>
<li><a href="/#">Link 2</a></li>
<li><a href="/#">Link 3</a></li>
<li>
<a class="button" href="#" style="height: 60px;">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>的jsfiddle链接：http://jsfiddle.net/6er3aguk/
我想什么来实现基本上是有某种对登录链接顶部/底部边缘的，所以它不沾到周围div的顶部和底部。
关于如何实现这一点的任何想法？
我的$ .02：你的代码将呈现的方式看起来比下面的解决方案更好（更现代化）。另外，由于导航栏中的其他链接是全高的，不应该也是这样吗？ – isherwood
谢谢。下面的解决方案确实有效，但您提出了一个很好的观点。我不介意所有的链接都像'height：80％'还是比父div小一些。但是，我无法做到这一点。你知道另一种做法吗？编辑：我想我想要避免的只是触摸父div的最后一个按钮，因为它看起来不太好... – carvil