我有这个代码:
<html>
<body>
<div>aatatgcatgccccagattgcccatgccgata</div>
<div style="left:7%; position:absolute;">cat</div>
<div style="left:13%;position:absolute;">cat</div>
</body>
</html>
文本“cat”出现在位置 7 和 13(来自最后一个模式)。我想使用 7% 和 13%(先前模式的长度)来显示它。这是所需效果/显示方式的示例:
aatatgcatgccccagattgcccatgccgata
cat cat
|||||| |||||||||||||
7% 13%
我正在使用 %，但它不适用于那个。我怎样才能正确显示它？
最佳答案
您可能需要查看 ch 单元 ( see article about units on MDN ):
ch
This unit represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's font.
如果您使用等宽字体(所有字符具有相同宽度的字体)，那应该可以解决问题。像这样:
<div>aatatgcatgccccagattgcccatgccgata</div>
<div>
<span style="padding-left:7ch;">cat</span>
<span style="padding-left:13ch;">cat</span>
</div>
您可以在此处查看示例:http://jsfiddle.net/qz92p4ok/1/
关于html - 有什么可能的方法可以通过字体出现的次数来对齐字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29076638/