前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

每天一个CSS小技巧 - 调整tab的宽度

这是一个包含大量代码的网页(比如文档或教程)在样式上无法避免的问题。其中最大的一个问题就是让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后的数字是指对应数字大小的几个字符的宽度。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言