Question

我有这段代码：

<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%

我正在使用％，但它无效。我怎么能正确显示它？

Answer 1

您可能需要查看ch单元（see article about units on MDN）：

ch

此单位表示宽度，或更确切地说是前进   测量，字形'0'（零，Unicode字符U + 0030）   元素的字体。

如果使用等宽字体（所有字符具有相同宽度的字体），那应该可以解决问题。像这样：

<div>aatatgcatgccccagattgcccatgccgata</div>
<div>
    <span style="padding-left:7ch;">cat</span>
    <span style="padding-left:13ch;">cat</span>
</div>

您可以在此处查看示例：http://jsfiddle.net/qz92p4ok/1/

是否可以通过字体出现次数对齐字体？

1 个答案: