在 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>

我期待如下结果

美国广播公司

但相反，我越来越喜欢

ABCE

我不能 在我的工作中使用我正在迭代一个数组，它可能如下所示

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

有人可以建议如何获取空白值的空格吗？

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

Answer 1

您可以设置min-width: 1chwhere1ch表示宽度为 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 网络文档