在li标签中显示空格

html5 • • 问答

我有以下 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>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li> </li>
  <li>E</li>
</ul>

回答

您可以设置min-width: 1chwhere1ch表示宽度为 1 个字符。

ul {
    margin: 0;
    padding: 0;
    display: flex;
}

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

ch
表示元素字体中字形“0”（零，Unicode 字符 U+0030）的宽度，或者更准确地说是提前量度。

来源：MDN 网络文档

以上是在li标签中显示空格的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容