Html 相同长度字符的像素差异_Html_Css_User Interface

Html 相同长度字符的像素差异

html css user-interface

Html 相同长度字符的像素差异,html,css,user-interface,Html,Css,User Interface,在css中工作时，我遇到了一个问题长度相同的字符在像素值上存在差异 <html> <div> WWWWW IIIII AAAAA </div> </html> WWWWW 三 AAAA WWWWW 三 AAAA 两者

在css中工作时，我遇到了一个问题

长度相同的字符在像素值上存在差异

<html>
<div>
<p><b>WWWWW</b></p>
<p><b>IIIII</b></p>
<p><b>AAAAA</b></p>
</div>
</html>


WWWWW
三
AAAA

WWWWW

三

AAAA

两者具有相同的[5]字符长度。

如何在CSS中调整它们？

您可以使用

字体系列：monospace
这将使用为每个字母保留相同水平空间的字体，而不管其实际宽度如何

*{
字体系列：monospace；
}

WWWWW
三
AAAA
您不能在CSS中执行此操作，您可以指定的最大值是字体系列：monospace
。你有一个JS解决方案
HTML:
ww
IIIIIIIIII
AAAAAAAAAA

CSS:
.scaled>span{
显示：内联块；
宽度：20px；
边框：1px实心浅灰色；
文本对齐：居中；
}

JAVASCRIPT:
$（'.scaled'）。每个（函数（）{
设$scaled=$（这个）；
设chars=$scaled.text（）.split（“”）；
设charsSpans=chars.map（（char）=>$（''+char+''）；
美元比例
.empty（）
.附加（charsSpans）；
});
使用单空格字体或非样式的
-tag您到底想达到什么目的？我在我的网页中使用这个圆圈，并留有空格。但是，当它带有相同长度的不同数据时，它没有正确对齐。您可能希望文本对齐：居中
itfont-family:monospace解决了这个问题