1

Webページで同じ幅にするために次の2つのUnicode文字が必要です：▼（＆＃9660;）と▶（＆＃9654;）

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 に答える