css - LI 与 CSS 垂直对齐，但有 1 px 边距

Question

我需要在水平排列的 LI 元素中垂直对齐文本，但它们之间的边距需要为 1 px。如果我使用 display:table-cell 和 border-spacing:1 px 那么它们之间的空间最终为 2 像素。我希望我可以设置“border-spacing-right:1px”。有任何想法吗？下面是我的代码，第一组甚至没有对齐，也在 fiddle 中:http://jsfiddle.net/break68/SLDcU/3/

<style>
.nav1 li {
display: inline-block;
text-align: center;
vertical-align: middle;
height:40px;
width:50px;
background-color:#777;
margin-right:1px;
list-style: none;
float: left;
padding:2px;
}

.nav2 li {
display: table-cell;
text-align: center;
vertical-align: middle;
height:40px;
width:50px;
margin-right:1px;
background-color:#777;
list-style: none;
padding:2px;
border: 1px solid white;
border-spacing: 1px;
}
</style>

<ul class="nav1">
<li>one</li>
<li>two<br /> lines</li>
<li>three</li>
</ul>

<ul class="nav2">
<li>one</li>
<li>two<br /> lines</li>
<li>three</li>
</ul>

Answer 1

我在这里为您提供了更新的 JS fiddle :JSFiddle

添加并替换了一些属性，例如 margin-right: 1px; .nav2 li

边框导致你的 li 元素之间有 1px 的额外空间。

.nav1 li {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height:40px;
    width:50px;
    background-color:#777;
    margin-right:1px;
    list-style: none;
    float: left;
    padding:2px;

.nav2 li {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    height:40px;
    width:50px;
    margin-right:1px;
    background-color:#777;
    list-style: none;
    float: left;
    padding:2px;
    margin-right:1px;