HTML – 如何在li中居文本？

2019年7月27日 210次阅读

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

《HTML – 如何在li中居文本？》

HTML：

< UL><李>收件箱< /立GT;< /立GT;<李>草稿箱< /立GT;< /立GT;<李>发送< /立GT;< /立GT;<李>垃圾和LT; /立GT;< / UL>

CSS：

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

我已经测试了CSS,它正在按预期工作.我认为问题在于li并不都具有相同数量的字母,所以最终会产生一些奇怪的视觉效果.我相信这个的理由：

《HTML – 如何在li中居文本？》

(等间距)

最佳答案 我对这个问题的处理方法是将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以查看它是否正常工作.

点赞