LI 与 CSS 的垂直对齐，但有 1 px 边距答案

【问题标题】：Vertical alignment of LI with CSS, but with 1 px marginLI 与 CSS 的垂直对齐，但有 1 px 边距
【发布时间】：2014-03-01 05:39:50
【问题描述】：

我需要在水平排列的 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>

【问题讨论】：

我错过了什么吗？您链接的小提琴在每个 li 之间有 1px 的边距。
margin-right:1px;加边框：1px纯白色；等于两个像素间隙

标签： css vertical-alignment css-tables

【解决方案1】：

我在这里为你准备了一个更新的 JS 小提琴：JSFiddle

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

边框导致你的 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;

}

【讨论】：

【解决方案2】：

您可以删除任何边距，只需为列表项分配 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.

【讨论】：