选项卡空间而不是多个非空白空格(“nbsp”)?
是否可以在HTML中插入制表符,而不必input
四次?
使用CSS要干净得多。 尝试padding-left:5em
或margin-left:5em
而不是。
这取决于您要使用哪个字符集。
在ISO-8859-1 HTML中没有定义标签实体 – 但是除了
如 
,  
和 
。
在ASCII中, 	
是一个选项卡。
这里是一个完整的HTML实体列表和维基百科上有用的空白讨论 。
不,就HTML而言,标签只是空格。 我build议一个em空格,而不是这个大( – > < – ),并input为 
。 如果幸运的话,你甚至可以用unicodeangular色逃脱。
&EMSP; 是答案。
但是,如果您习惯于在Word,Wordperfect,Open Office,Wordworth等文字处理程序中使用横向制表,则它们的function将不如您所期望的那样。它们的宽度是固定的,而且无法自定义。
CSS给了你更大的控制权,并提供了一个替代scheme,直到W3C提供了一个官方的解决scheme
例:
padding-left:4em
..要么..
margin-left:4em
..作为适当的
这取决于您要使用哪个字符集。
你可以设置一些标签标签,并使用它们类似于你将如何使用H标签。
<style> tab1 { padding-left: 4em; } tab2 { padding-left: 8em; } tab3 { padding-left: 12em; } tab4 { padding-left: 16em; } tab5 { padding-left: 20em; } tab6 { padding-left: 24em; } tab7 { padding-left: 28em; } tab8 { padding-left: 32em; } tab9 { padding-left: 36em; } tab10 { padding-left: 40em; } tab11 { padding-left: 44em; } tab12 { padding-left: 48em; } tab13 { padding-left: 52em; } tab14 { padding-left: 56em; } tab15 { padding-left: 60em; } tab16 { padding-left: 64em; } </style>
…并像这样使用它们:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tabulation example</title> <style type="text/css"> dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */ tab1 { padding-left: 4em; } tab2 { padding-left: 8em; } tab3 { padding-left: 12em; } tab4 { padding-left: 16em; } tab5 { padding-left: 20em; } tab6 { padding-left: 24em; } tab7 { padding-left: 28em; } tab8 { padding-left: 32em; } tab9 { padding-left: 36em; } tab10 { padding-left: 40em; } tab11 { padding-left: 44em; } tab12 { padding-left: 48em; } tab13 { padding-left: 52em; } tab14 { padding-left: 56em; } tab15 { padding-left: 60em; } tab16 { padding-left: 64em; } </style> </head> <body> <p>Non tabulated text</p> <p><tab1>Tabulated text</tab1></p> <p><tab2>Tabulated text</tab2></p> <p><tab3>Tabulated text</tab3></p> <p><tab3>Tabulated text</tab3></p> <p><tab2>Tabulated text</tab2></p> <p><tab3>Tabulated text</tab3></p> <p><tab4>Tabulated text</tab4></p> <p><tab4>Tabulated text</tab4></p> <p>Non tabulated text</p> <p><tab3>Tabulated text</tab3></p> <p><tab4>Tabulated text</tab4></p> <p><tab4>Tabulated text</tab4></p> <p><tab1>Tabulated text</tab1></p> <p><tab2>Tabulated text</tab2></p> </body> </html>
试试  
相当于四个
秒。
实际上没有任何简单的方法在段落内部(或中间)插入多个空格。 那些暗示你使用CSS的人缺less这一点。 你可能并不总是试图从一边缩进一段,但事实上,试图在一个特定的地方放置额外的空间。
实质上,在这种情况下,空间成为内容而不是风格。 我不知道为什么这么多人没有看到。 我想他们试图强制分离风格和内容规则的刚性(HTML从一开始就被devise为可以做到这一点 – 偶尔使用适当的标签定义独特元素的风格,而不必花费太多时间在创buildCSS样式表的时候,当它用在适度的时候,绝对没有什么不可读的,还有一些东西可以被快速地做出来。)转化为它们只能将空白字符视为仅用于风格和缩进。
而当没有优雅的方式插入空间而不必依赖 
和
标签,我会争辩说,由此产生的代码变得比如果有一个适当的命名标签,可以让你快速插入大量的空间(或者,如果你知道,空间不是不必要地消耗在第一个地点)。
就像上面说的那样,你最好的select就是使用 
插入正确的地方。
我在search一个方法的时候遇到了这个问题,最终搞清楚了我自己的想法。 我新来张贴在这里,所以我希望这可以工作…但在CSS中:
span.tab{ padding: 0 80px; /* Or desired space*/ }
然后在你的HTML这是你的“长标签”在中期的句子,就像我需要:
<span class="tab"></span>
节省的金额 或者 
你需要的
希望这可以帮助别人,欢呼!
使用pre标签更好。 pre标签定义了预先格式化的文本。
<pre> This is preformatted text. It preserves both spaces and line breaks. </pre>
在此链接了解更多有关预标签的信息
AFAIK,唯一的方法就是使用
如果你可以使用CSS,那么你可以使用填充或边距。 请参阅Box模型 ,对于Internet Explorer,还请阅读Internet Explorer盒模型错误 。
 
,  
,  
或者 
可以使用。
W3说…
The character entities   and   denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.
请阅读W3.org的HTML3
请阅读W3.org的HTML4
更在维基百科
如果空格变得很重要,最好使用预先格式化的文本和<pre>标签。
尽pipe在HTML3中引入了<tab>标签,但是它并没有成为浏览器。 我一直认为这是一个真正的遗憾,因为在许多情况下,如果我们有可用的话,生活就会容易得多。 但是,你可以很容易地补救这个给你一个假的<tab>标签。 在你的HTML的头部或者(不带样式标签)添加到你的CSS中:
<style> tab { padding-left: 4em; } </style>
从那时起,当你需要在你的文档中的选项卡放在<tab>中。 这不是一个真正的选项卡,因为它不符合制表符,但它适用于大多数需求,而不必与笨拙的字符实体或跨度抖动。 它使得检查源代码变得非常简单,并且可以轻松地设置简单的事情,而不需要去处理表格或其他更复杂的“解决scheme”。
这个解决scheme的一个很好的方面是,你可以快速search/replace文本文档,用<tab>标签replace所有的TAB。
你可能能够定义一堆真正的绝对位置TAB,然后在需要的地方使用适当的选项卡(例如<tab2>或<tab5>或其他),但是我没有find一种方法来做到这一点,没有它缩进后续行。
如果你想缩小段落中的第一句话,你可以用一个小小的CSS技巧来做到这一点:
p:first-letter { margin-left: 5em; }
您可以使用表格并将width
属性应用于第一个<td>
。
码:
<table> <tr> <td width="100">Content1</td> <td>Content2</td> </tr> <tr> <td>Content3</td> <td>Content4</td> </tr> </table>
结果
Content1 Content2 Content3 Content4
我已经使用了线样式的跨度。 我不得不这样做,因为我处理一个纯文本string,需要用4个空格replace\ t(appx)。 我无法使用
随着这一过程的进一步解读,最终的标记还没有内容空间。
HTML:
<span style="padding: 0 40px"> </span>
我用这样的PHP函数:
$message = preg_replace('/\t/', '<span style="padding: 0 40px"> </span>', $message);
如果你只需要一个标签,下面的工作对我来说。
<style> .tab { position: absolute; left: 10em; } </style>
用HTML这样的东西:
<p><b>asdf</b> <span class="tab">99967</span></p> <p><b>hjkl</b> <span class="tab">88868</span></p>
您可以通过添加额外的“标签”样式和更改HTML来添加更多的“标签”,例如:
<style> .tab { position: absolute; left: 10em; } .tab1 { position: absolute; left: 20em; } </style>
用HTML这样的东西:
<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p> <p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>
如果你使用CSS,我会build议如下:
p:first-letter { text-indent:1em; }
这将像传统出版物一样缩进第一行。
<span style="margin-left:64px"></span>
考虑这样的:一个选项卡等于64像素。 所以这是我们可以通过CSS给的空间。
我使用没有项目符号的列表来给出“标签”外观。 (这是我使用MS Word时有时做的)
在CSS文件中:
.tab { margin-top: 0px; margin-bottom: 0px; list-style-type: none; }
在HTML文件中使用无序列表:
This is normal text <ul class="tab"> <li>This is indented text</li> </ul>
这个解决scheme的优点是可以使用嵌套列表进一步缩进。
一个小白在这里说话,所以如果有任何错误,请评论。
使用CSS和最佳实践,dynamic创build嵌套的缩进菜单如下所示:
- 为每个嵌套创build一个样式,例如indent1,indent2等,每个嵌套指定它自己的左边距。 网站结构应该很less超过三层嵌套。
- 在自recursion函数中使用一个静态variables(整数)来跟踪recursion。
- 对于每个循环,使用服务器端脚本(如PHP或ASP)将循环编号附加到单词
indent
,以便这些菜单由CSS进行适当格式化。
或者,循环使用多个静态variables来添加间距 或<pre>
标签或其他字符。
从testing水平制表符, 	
我发现它不能作为多个替代品的替代品 在我描述的场景中。 你可能会有不同的结果。
这是一个丑陋的解决scheme,但你可以做到这一点
var tab = ' ';
然后在你的string中使用tabvariables。
只有“预”标签:
<pre>Name: Waleed Hasees Age: 33y Address: Palestine / Jein</pre>
你可以在这个标签上应用任何CSS类。
我只是build议:
/* In your CSS code: */ pre { display:inline; } <!-- And then, in your HTML code: --> <pre> This text comes after four spaces.</pre> <span> Continue the line with other element without braking </span>
那么,如果在一行的开头只需要一个很长的空白,那么这可能是一个解决scheme:
<span style='display:inline-block;height:1em;width:4em;'> </span>
如果这太多了,或者在许多地方需要这样的标签,那么你可以做到这一点
<span class='tab'> </span>
然后将其包含到CSS中:
span.tab {display:inline-block;height:1em;width:4em;}
<head> <style> t {color:#??????;letter-spacing:35px;} </style> </head> <t>.</t>
确保颜色代码匹配背景px是可变的选项卡所需的长度。
然后在<t>之后加上你的文字。</ t>
这段时间被用作太空持有人,打字比较容易,但'''' 也可以用来代替这个时期,所以颜色编码是无关紧要的。
<head> <style> t {letter-spacing:35px;} </style> </head> <t> </t>
这对于显示文本段落来说是非常有用的,尽pipe在脚本的其他部分可能会有用。
你也可以使用:
p::before { content: ""; padding-left: 30px; }
用你想要的其他select器代替“p”。
CSS
<html> <head> <style> tab:before { content: "\00a0\00a0\00a0\00a0"; } </style> </head>
HTML
<body> <tab> #include < stdio.h > <br> <tab> <br> <tab> int main (void) <br> <tab> { <br> <tab> <tab> printf ("Hello, World!"); <br> <tab> <tab> return 0; <br> <tab> } <br> </body> </html>
渲染
当您需要选项卡时,通常您要在项目的左侧进行缩进,而不pipe其他项目的宽度。 我的意思是,在以下情况下,所有其他解决scheme都将失败:
1234 When a programmer fails, ask a web designer 12 When a programmer fails, ask a web designer
因此,我build议在引导中使用div的CSS样式。
在任何地方你需要一个标签,只需创build适当宽度的div。 例如:
... <td> <div class="col-md-4"> 1234 </div> <div class="col-md-8"> The required tabulation </div> </td> ...
这不是一个直接的答案,但我想在Markdown文档中添加一个选项卡。 我正在绘制一个这样的对象图:
--Parent | + Child 1
当然,简单的方法是通过4个空格缩进来将其标记为代码,然后在Markdown中将其视为代码。
--Parent | + Child 1
我们可以使用style =“white-space:pre”像这样:
<p>Text<tab style="white-space:pre"> </tab>: value</p> <p>Text2<tab style="white-space:pre"> </tab>: value2</p> <p>Text32<tab style="white-space:pre"> </tab>: value32</p>
里面的空白处填充了标签,标签的数量取决于文字。
它会看起来像这样:
Text : value Text2 : value2 Text32 : value32