如何在li中居中文本？

Question

我试图让四个不同的li元素之间有相等的间距，但最终结果如下：

HTML：

<ul><li>收件箱</li><li>草稿</li><li>已发送</li><li>垃圾箱</li></ul>

CSS：

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

我已经测试了CSS，它的工作正常。我认为问题在于

没有完全相同的字母数量，因此会导致一些奇怪的视觉效果。我这么认为的原因是：（间距相等）

- Hunter S

---

这是您要找的吗？链接 - Lucio

@Lucio 当然可以！您能否在答案中发布它并进行解释？ - Hunter S

尝试使用flexbox：https://dev59.com/questions/bGMk5IYBdhLWcg3wtgMR#33049198 - Michael Benjamin

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，以查看其工作原理。

- Lucio

Answer 2

试试这个

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

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

- rafahell