Geek Answers Handbook

Simulate a tab in CSS

In any case, to simulate tabs using CSS.

how

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

How can I simulate this behavior?

PS: If this is not obvious, I do not know the length of the text in advance.

+4
source share
4 answers

A pure CSS solution seems unlikely to me for this behavior. Therefore, if you switch to using javascript, it might look like this:

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'; } }

See also Demo script .

Disclaimer: I am noob in javascript and, of course, do not know anything about javascript frameworks, so it is very likely that this procedure can be optimized.

+2
source

If it does not have to be perfect (as OP said on June 12, 11 at 12:05), at least in ie7, the <pre> block already supports tabs using tabs (fixed at 8 char -widths [ref] if tab-size [ref] is not supported), and maybe a style attribute is also useful here to override the default font width.

+1
source

You should use table to display tabular data: see this demo script .

0
source

This is how I came across a similar problem, but the success of this method will depend on your specific application.

Instead of thinking of it as a tabbed row, try using an HTML table with a border of 0. Each column is perfectly aligned so that it is like a tab.

 <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>

will give you what you want - or you can change it to do it

0
source

More articles:


All Articles