Question

我需要在水平排列的LI项目中垂直对齐文本，但它们之间的边距需要为1 px。如果我使用display：table-cell和border-spacing：1 px，那么它们之间的空格最终为2像素。我希望我能设置“border-spacing-right：1px”。有任何想法吗？下面是我的代码，其中第一个集合甚至没有对齐，也在小提琴中：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

您可以删除任何边距，只需为您的列表项指定1px的右边框。

border-right: 1px solid #FFF;

Here your adjusted jsfiddle

或者你可以将边框分配到左侧，然后将其移除到第一个孩子上以保持平衡并且看起来不错。

li:first-of-type {
    border-left: none;
}

Here an example jsfiddle（这次是黑色背景，所以你可以看到发生了什么）。

您也可以通过将文本包装在另一个div（或锚点）中，将一些填充应用于列表项，并将背景移动到新的内部div来解决此问题。这种方法的一个好处是，如果正常应用边距，最终会得到透明空格。

例如：

HTML

<ul>
    <li><div class="inner_wrap">one1</div></li>
    <li><div class="inner_wrap">two2<br /> lines</div></li>
    <li><div class="inner_wrap">three3</div></li>
</ul>

CSS

.inner_wrap {
    background-color:#777;
    height:40px;
    width:50px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
li {
    list-style: none;
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 1px;
}
li:first-of-type {
    padding: 0;
}

Here a jsfiddle

Answer 2

我在这里有一个更新的JS小提琴：JSFiddle

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

边框导致你的物品之间有1个额外的空间。

.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;

}

LI与CSS垂直对齐，但边距为1 px

2 个答案: