如何在 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

试试这个

ul {
    width:100%;
    margin-left: 0;
    margin-bottom: 0
} 

li { 
     list-style-type: none;
    display: inline-block;
    margin-right: 20px;
}

Answer 2

我解决这个问题的方法是将 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 以查看它是否正常工作。

如何在 li 中将文本居中？

How to center text in li?

html

css

html-lists

web