Question

前提条件是我使用等宽作为我的 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>

使用 em

em 应该等于计算字体大小值，但 padding-left：1em; 不起作用：
使用 px

padding-left：32px; 与 padding-left：1em; 输出相同的输出。
使用 ex

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

使用 ch

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

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

Answer 1

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

content

我不知道哪些浏览器支持此功能，但我认为所有现代浏览器都会支持。

http://jsfiddle.net/cavqM/

Answer 2

根据Tatu的方法，你可以使用像 这样的无破坏空间的unicode表示

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

HTH，

- hennson

如何将文本缩进一个字符宽度

2 个答案: