在li标记中显示空格

Question

我有下面的HTML代码

ul {
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
color: #484848;
font-size: 80px;
}

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li> </li>
<li>E</li>
</ul>

我期待的结果如下

ABC E

但相反，我变得像

ABCE

我不能使用 ，因为在我的工作中，我正在迭代一个可能低于的数组

array = ['A', 'B', 'C', ' ', 'E'];

有人能建议一下如何获得空白值的空格吗？

这是密码笔https://codepen.io/gs650x/pen/mdmWOMJ

Answer 1

您可以设置min-width: 1ch，其中1ch表示1个字符的宽度。

ul {
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
color: #484848;
font-size: 80px;
min-width: 1ch;
}

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li> </li>
<li>E</li>
</ul>

ch
表示字形"；0"；(零，Unicode字符U+0030(。

来源：MDN Web文档

Answer 2

使用white-space:pre

ul {
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
color: #484848;
font-size: 80px;
white-space:pre
}

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li> </li>
<li>E</li>
</ul>

Answer 3

是否尝试添加默认宽度：

ul {
margin: 0;
padding: 0;
display: flex;
}
ul li {
width: 20%;
list-style: none;
color: #484848;
font-size: 80px;
}

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li> </li>
<li>E</li>
</ul>

Answer 4

要在字母之间留出一些空间，您可以尝试以下代码。。。

ul {
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
color: #484848;
font-size: 80px;
}
#downshow{
visibility: hidden;
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li id="dontshow">D</li>
<li>E</li>
</ul>

根据上面的代码，你必须键入一些需要空间的字母，然后在css样式中，你可以将可见性隐藏起来。