html - 在 CSS 中模拟选项卡

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 框架一无所知，因此很有可能可以优化此例程。