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