li中的文字如何居中？

Question

我试图在四个不同的li元素之间具有相等的间距，但我最终得到的是：

HTML：

<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>

CSS：

ul li { 
     width: 25%;
     display: inline-block;
     text-align: center;
}

我已经测试了 CSS，它可以正常工作。我认为问题在于 的li字母数量并不相同，因此最终会出现一些奇怪的视觉效果。我相信这一点的理由：

（等间距）

Answer 1

我解决这个问题的方法是将 li 放在 ul 的中心，因为 ul 自然会与父级具有相同的宽度。

ul {
    /* Use flex boxes to align li items */
    display: flex;
    justify-content: space-around;
    /* Remove default padding from major browsers */
    padding: 0;
    /* Hide the default decorations for li items */
    list-style: none;
}
ul > li {
    /* Display the elements in one line */
    display: inline-block;
}

查看这个 JSFiddle以查看它的工作原理。