Question

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

Answer 1

尽管其他海报的主张恰恰相反，但有充分理由想要做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/

Answer 2

您可以使用CSS属性 p { text-indent:50px; }

您可以为每个缩进使用css类，如

h1 { text-indent: 10px; }
h2 { text-indent: 14px; }
h3 { text-indent: 18px; }
p { text-indent: 20px; }
p.notice { text-indent: 24px; }

并像这样执行HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Text 1</p>
<p class="notice">Text 2</p>

因为您只能使用此属性缩进一行，所以还有另一种支持多行缩进的方法：

h1 { padding-left: 10px; }
h2 { padding-left: 14px; }
h3 { padding-left: 18px; }
p { padding-left: 20px; }
p.notice { padding-left: 24px; }

最后是fiddle。

Answer 3

您可以使用为其提供相同固定宽度的类将数据划分为<div>。这样，列将全部排成一行。

<style>
  div.col-1 {
    width: 200px
  }
  div.col-2 {
    width: 500px
  }
</style>

First row is:
<div class="col-1">Some text here </div><div class="col-2">And here </div>
...
Second row is:
<div class="col-1">And here </div><div class="col-2">And here </div>

Answer 4

实际上，我有类似的情况，而且我做得非常简单。使用<span>属性中的<p>，并将其正确浮动。

的CSS：

p.main-text { /* these properties don't matter much */    
    margin: 0;    
    text-indent: 0;    
    font-size: 1em;    
    line-height: 1.2;    
    text-align:justify;    
}    
span.column-width { /*this defines the width of the first column */    
    width: 33%;    
    float: left;    
}

HTML：

<p class="main-text"><span class="column-width">Diary Date: 2016 April 01 &mdash;</span>This is the text of the diary entry. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit. Integer molestie sed mauris eget gravida. Fusce aliquam diam eu arcu imperdiet vehicula. Fusce fermentum molestie aliquet. Phasellus sodales, mauris sed ornare accumsan, dolor ligula vehicula magna, vel pulvinar sapien lorem condimentum purus. Etiam vulputate commodo mattis. Etiam non tincidunt leo, eget ultricies mauris. Fusce rhoncus ultrices purus. Nunc id scelerisque nisi, quis congue turpis.</p>

小提琴：http://jsfiddle.net/Q3ruh/44/

Answer 5

我知道问题说没有表格，以前的JS答案不受欢迎，但有人应该觉得这很有用。它没有真正的制表位，但即使使用CSS也是如此。

如果您不想做一堆手动span或table标记，那么当页面加载时，此JS会自动将类“tabs”的所有元素转换为表格，使用制表符作为指导。

JS小提琴：https://jsfiddle.net/s7m6zggp/7/

编辑：第二个想法，也许不是最好的方法。正则表达式让我的大脑投入了一个循环。但是如果有人想要使用它，我会保持小提琴。

Answer 6

解决方案似乎是使用Javascript。这是一个简单的例子：http://jsfiddle.net/A6z5D/1：

<p>Hello bla bla bla<span id="tab1"></span>world</p>
<script>
function do_tab(id, tabstops)
{
    var tab1 = document.getElementById(id);
    var rect = tab1.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
    var tabstop = 0;
    for (var i = 0; i < tabstops.length - 1; ++i)
    {
        if (rect.left >= tabstops[i] && rect.left < tabstops[i+1]) 
        {
            tabstop = tabstops[i+1];
        }
    }
    if (tabstop > 0)
    {
        var width = tabstop - rect.left;
        tab1.style.display = "inline-block";
        tab1.style.width = width + "px";
    }
}
do_tab("tab1", new Array(0, 100, 200, 300, 400));
</script>

我可以在html5中设置制表位吗？

6 个答案: