填充<li>

Question

请参阅这里的 jsFiddle示例

我申请padding-top到的li尝试对齐文本更接近底部.但它只是做得li更大,尽管似乎有足够的空间来适应文本.

有任何想法吗？

<ul>
    <li class="padded">x</li>
    <li>x</li>
</ul>?

li {
        width: 25px;
        height: 25px;
        border: solid 1px black;
        display: inline;
        margin: 0 2px 0 0;
        float: left;
}

.padded {
    padding: 3px 0 0 0;
    text-align: center;
}

我在IE7和Chrome中得到了相同的结果,没有检查任何其他浏览器.

Answer 1

li.padding越来越大,因为你的高度为25px加上3px的填充顶部.

如果要增加顶部填充,则应该减小li.padding的高度,但是它与普通列表项保持相同的高度.因此,如果要使用3px填充顶部的25px高块,则应将高度设置为22px,填充为3px.

li {
        width: 25px;
        height: 25px;
        border: solid 1px black;
        display: inline;
        margin: 0 2px 0 0;
        float: left;
}

.padded {
    padding-top: 3px;
    height:22px /* original height (25px) minus padding-top (3px) */
    text-align: center;
}