html - 在 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
Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element's font.

Source: MDN Web Docs