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

Question

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

我想在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>

Run Code Online (Sandbox Code Playgroud)

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

另一个例子,有溢出剪辑:http://jsfiddle.net/KzhP8/

简短的答案是肯定的，但其他方法并不是“解决方法”。有很多方法可以满足OP的要求。每个都有自己的优点和缺点。我向读者传达的信息是，不要被那些说不可能做到的人所推迟。它可以。我没有花时间记录所有可能的方法。当我三年前写下这篇文章时，已经有强大的工具可以完成规范草案中的要求。我非常确定这些现在已经开始出现在浏览器中。每个人的需求都会导致选择不同的解决方案。 (2认同)

Answer 2

Way*_*her 0

解决方案似乎是使用 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，3 月前
查看次数：	15352 次
最近记录：	6 年，3 月前