这是一个包含大量代码的网页(比如文档或教程)在样式上无法避免的问题。其中最大的一个问题就是让tab合适地用来缩进代码。默认情况下是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
pre, code{
font-family: monospace;
}
pre{
display: block;
margin: 1em 0;
white-space: pre;
}
</style>
</head>
<body>
<pre><code>while (true) {
var d = new Date();
if (d.getDate()==1 &&
d.getMonth()==3) {
alert("TROLOLOL");
}
}</code></pre>
</body>
</html>
你可以看到一个tab的大概是8个字符。
这里的方法很简单,只要如下就可以:
pre{
display: block;
margin: 1em 0;
white-space: pre;
tab-size: 2;
}
这里需要注意的是tab-size后的数字是指对应数字大小的几个字符的宽度。