当使用固定宽度的字体时，我想指定一个HTML元素的字符宽度。
“em”单位应该是M字符的宽度，因此我应该能够使用它来指定宽度。这是一个例子：
<html>
<head>
<style>
div {
font-family: Courier;
width: 10em;
}
</style>
</head>
<body>
<div>
1 3 5 7 9 1 3 5 7 9 1
</div>
</body>
</html>
结果不是我想要的，因为浏览器行在第15列之后，而不是10：
1 3 5 7 9 1 3 5 7 9 1
(在Firefox和Chromium中，在Ubuntu中都有)。
Wikipedia’s article说“em”并不总是M的宽度，所以它看起来像“em”单元不能被信任。
解决方法
1em是M的高度，而不是宽度。对于ex来说同样成立，这是x的高度。更一般来说，这些是大写和小写字母的高度。
宽度是一个完全不同的问题….
将您的示例更改为
<div>
<span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>
你会注意到跨度的宽度和高度是不同的。对于Chrome上的20px的字体大小，跨度为12×22像素，其中20像素为字体的高度，2像素为行高。
现在因为em和ex在这里没有用，一个可能的策略，一个css-only解决方案
>创建一个只包含& nbsp;
>让它自动调整大小
>将你的div放在里面
>使其为周围元素的10倍。
然而我没有设法编码这。我也怀疑这真的是可能的。
然而，相同的逻辑可以在Javascript中实现。我在这里使用无处不在的jQuery：
<html>
<head>
<style>
body { font-size: 20px; font-family: Monospace; }
</style>
<script
type="text/javascript"
src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
</head>
<body>
<div>1 3 5 7 9 1 3 5 7 9 1</div>
<script>
$('body').append('<div id="testwidth"><span> </span></div>');
var w = $('#testwidth span').width();
$('#testwidth').remove();
$('div').css('width',(w * 10 + 1) + 'px');
</script>
</body>
</html>
1(w * 10 1)是处理舍入问题。
