11

前提条件は、フォントファミリとしてモノスペースを使用することですが、正しく機能していないようです。いくつかの解決策を試しましたが、そのうちの8つは機能し、HTML構造は次のようになります。

<!DOCTYPE html>
<style>
  body {
    font-family: monospace;
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 32px; /* large enough to see the effect */
  }
  div:last-of-type {
    padding-left: 1em; /* what's the value? */
  }
</style>
<div>123456</div>
<div>abcdef</div>

  1. emを使用する

    emは、計算されたfont-size値と同じである必要がありますが、 padding-left：1em; 動作しません：

    em

  2. pxを使用する

    パディング-左：32px; padding-leftと同じ出力を作成します：1em; 。

  3. exを使用

    exは、文字'x'の計算された高さである必要があり、どちらも機能しません。

    元

  4. chを使用する

    OK、webkitはchをcssユニットとしてサポートしていません。

したがって、cssを記述して、2番目のdivを1文字の幅で正確にインデントするにはどうすればよいですか。つまり、最初の「0」は文字「b」にずれることなく左揃えにする必要があります。

4

2 に答える 2

13

少しハッキーですが、1つの可能な方法は、次のよう:beforeな疑似セレクターを使用して、行の前にスペースを挿入することcontentです。

div:last-of-type:before {
    content: " ";
    white-space: pre;
}

どのブラウザがこれをサポートしているかはわかりませんが、最近のすべてのブラウザがサポートしていると思います。

http://jsfiddle.net/cavqM/

于 2012-02-24T09:46:40.907 に答える
4

Tatuのアプローチに基づいて、次のような壊れないスペースのユニコード表現を使用できます。&nbsp;

div:last-of-type:before {
   content: "\00a0"; /* this is &nbsp; */
}

HTH、

-ヘンソン

于 2012-02-24T10:10:52.167 に答える