How to set the width CSS tab tabs?

You want to use CSS tab of tabs, tab-size attribute may be used; tab-size attribute specifies the width of the tab. Tabs (tab) characters usually show a space character in an HTML document.

 

In addition to some elements, such as <textarea> and <pre>, the results of tab-size attribute is valid only for this element.

grammar:

tab-size: number|length;

Property values:

● number: the number of tabs for each set of space characters (tab) of the characters to be displayed. The default value is 8.

● length: a length setting tab (tab) characters. However, most browsers do not support it.

Note: There is no browser supports this value as the unit of length; currently only supports Chrome tab-size property. Firefox supports another alternative attribute of the attribute, i.e. -moz-tab-size attribute; Opera support another alternative attribute of the attribute, i.e. -o-tab-size attribute.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab-size属性</title>
		<style>
			#t1 {
				tab-size: 4;
				-moz-tab-size: 4;
				/* 针对 Firefox 的代码 */
				-o-tab-size: 4;
				/* 针对 Opera 的代码 */
			}
			
			#t2 {
				tab-size: 16;
				-moz-tab-size: 16;
				/* 针对 Firefox 的代码 */
				-o-tab-size: 16;
				/* 针对 Opera 的代码 */
			}
		</style>
	</head>

	<body>
		<h1 style="color: peru;">tab-size属性</h1>
		<pre id="t1">I	use	tab-size	4</pre>
		<pre id="t2">I	use	tab-size	16</pre>
	</body>

</html>

Renderings:

4ab58781e8cad5645458f830b17b1df.png

Recommended reading:

java based tutorial

layui framework

go language tutorial

Original articles published 0 · won praise 8 · views 1282

Guess you like

Origin blog.csdn.net/weixin_45587319/article/details/104431833