1

我需要以下两个 Unicode 字符才能在网页中具有相同的宽度：▼ (▼) 和 ▶ (▶)

font-family: monospace; 没有帮助，他们仍然得到不同的宽度（Windows 8，Firefox 17）：

显示等宽问题的屏幕截图

有没有办法让页面上的每个（不仅是普通字母）字符都具有相同的宽度？

示例源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>7
  <body>
    <h1 style="font-family: monospace;">
      &#9660;test 
      <br>
      &#9654;test
    </h1>
  </body>
</html>
4

1 回答 1

4

将这两个字符放在另一个标签（如<span>）中，并使用 CSS 给它一个固定的宽度。像这样（工作示例）：

<span style="display: inline-block; width: 30px;">&#9660;</span>test 
<br>
<span style="display: inline-block; width: 30px;">&#9654;</span>test

或者选择一种我认为会更体面的纯 CSS 方法（工作示例）：

<span class="opened">test</span>
<br>
<span class="closed">test</span>

和CSS代码：

.opened::before {
    display: inline-block;
    content: "▼";
    width: 30px;
}

.closed::before {
    display: inline-block;
    content: "▶";
    width: 30px;
}
于 2012-12-13T16:32:30.947 回答