html - 如何在 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;
}

查看 this JSFiddle看到它的工作。