如何在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的宽度自然与父级相同。

def "do something else"() {
    when:
    // blah

    then:
    // blah

    expect:
    // blah

    where:
    // blah
}

查看this JSFiddle以查看其是否有效。

Answer 2

试试这个

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

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