Question

无论如何都要用CSS模拟Tab位置。

像：

..........|.........|..........|.........
Text!     Next tab  |          |
Longer text!        Next tab   |
Even more longer text!         Next tab

我该如何模拟这种行为？

PS：如果不明显，我不提前知道文字长度。

Answer 1

对于这种行为，我似乎不太可能使用纯CSS解决方案。所以如果你转向使用javascript，它可能看起来像这样：

HTML：

<div id="tabs">
    <p><span>Text!</span><span>Next tab</span></p>
    <p><span>Longer text!</span><span>Next tab</span></p>
    <p><span>Even more longer text !</span><span>Next tab</span></p>
</div>

使用Javascript：

var tabs = document.getElementById('tabs');
var ps = tabs.getElementsByTagName('p');
var p;
var spans;
var span;
var w;
var wTab = 70;

for (var i = 0; i < ps.length; i++)
{   p = ps.item(i);
    spans = p.getElementsByTagName('span');
    for (var j = 0; j < spans.length - 1; j++)
    {   span = spans.item(j);
        w = span.offsetWidth;
        w = Math.ceil(w / wTab) * wTab - w;
        span.style.paddingRight = w + 'px';
    }
}

另见Demo fiddle。

免责声明：我是javascript的菜鸟，肯定对javascript框架一无所知，因此很有可能优化这个例程。

Answer 2

如果它不必是完美的（正如OP在11月12日12:05所说的那样），至少在ie7中，<pre>块已经支持使用制表符标签（固定为8） char-widths [ref]除非支持tab-size [ref]），并且在这里也许有用，它可以覆盖默认的等宽字体样式属性。

Answer 3

您应该使用table来显示表格数据：请参阅此demonstration fiddle。

Answer 4

这是解决类似问题的方法，但此方法的成功取决于您的具体应用。

不要将其视为带有标签的字符串，而是尝试使用边框为0的HTML表。每列完全对齐，因此它就像一个标签。

<table border="0">
 <tr>
   <td>not tabbed</td>
   <td>1 tab over</td>
   <td> </td>
 </tr>
 <tr>
   <td>not tabbed</td>
   <td> </td>
   <td>2 tabs over</td>
 </tr>
</table>

会给你你想要的东西 - 或者你可以修改它来

在CSS中模拟选项卡

4 个答案: