大佬教程收集整理的这篇文章主要介绍了css – 以*字符指定宽度*，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
“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”单元不能被信任。
宽度是一个完全不同的问题….
将您的示例更改为
<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)是处理舍入问题。
以上是大佬教程为你收集整理的css – 以*字符指定宽度*全部内容，希望文章能够帮你解决css – 以*字符指定宽度*所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。