11

前提是我使用monospace作为我的font-family，但它似乎无法正常工作，我尝试了一些解决方案，但其中一个都有效，我的 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; 不起作用：

    时间

  2. 使用像素

    填充左：32px；与padding-left: 1em产生相同的输出；.

  3. 使用前

    ex应该是字母 'x' 的计算高度，它也不起作用：

    前任

  4. 使用ch

    好的，webkit不支持ch作为 css 单元。

那么如何编写css来准确缩进第二个div一个字符宽度，即第一个'0'应该与字母'b'左对齐，没有任何偏差。

4

2 回答 2

13

一种可能的方法，虽然有点 hacky，是使用:before伪选择器在行之前插入一个空格content：

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

我不知道哪些浏览器支持这个，但我假设所有现代浏览器都支持。

http://jsfiddle.net/cavqM/

于 2012-02-24T09:46:40.907 回答
4

基于 Tatu 的方法，您可以使用不可破坏空间的 unicode 表示，例如&nbsp;

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

高温下，

——汉森

于 2012-02-24T10:10:52.167 回答