html - 我可以在 html5 中设置制表位吗?

标签 html

我想在 html5 中设置制表位并能够将文本与其对齐,就像在 Word 中一样。对于我的应用程序,我不能使用表格。有没有办法做到这一点?我必须使用 Javascript 吗?

最佳答案

尽管其他张贴者的断言与此相反,但有充分的理由想要按照 OP 的要求进行操作,并且有许多方法可以使用现代 CSS 进行操作(在我撰写本文时的规范草案过程中还有更多方法)。这里只是一种方式。

<!DOCTYPE HTML>
<html>
 <head>
  <title>Tabs with css</title>
  <style>
  {body: font-family: arial;}
  div.row span{position: absolute;}
  div.row span:nth-child(1){left: 0px;}
  div.row span:nth-child(2){left: 250px;}
  div.row span:nth-child(3){left: 500px;}
  </style>
 </head>
 <body>
  <div class="row"><span>first row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>second row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>third row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>fourth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>fifth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
 </body>
</html>

在此处查看示例结果:http://jsfiddle.net/Td285/

另一个例子,溢出被剪掉了:http://jsfiddle.net/KzhP8/

关于html - 我可以在 html5 中设置制表位吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18369895/

相关文章:

javascript - 让基于 HTML 5 的 VR 应用在 Daydream 中显示

javascript - 更改 Bootstrap 下拉菜单的方向

css - 如何在容器 div 中排序 div 元素?

html - 使用 HTML 和 CSS 样式复选框

javascript - jQuery 文件未链接到 HTML 文档

html - 如何将html页面划分为2个静态div和1个可滚动div?

javascript - 自动重新加载 OpenLayers.Layer.Text 标记的数据

jquery - 滚动超出它后固定一个分区

html - CSS3 : height transition not working - specific use case

html - 将样式应用于 HTML 导航栏中的事件项