Question: I have this inline javascript, is there any way it could be made unobtrusive? thanks.

```
<a href="/uploads/status/image/52/Zombatar_1.jpg" onclick="displayLightBox(this); return false;">
    <img alt="Thumb_zombatar_1" src="/uploads/status/image/52/thumb_Zombatar_1.jpg">
</a>

```

Answer: 
I improved on Duopixels anwer by using one extra `<span>` element and `display: table-cell` instead of the flexbox implementation. This way you achieve better cross-browser support/fallback. <http://jsfiddle.net/w34nm/> (Tested in IE8+, Firefox 10, Chrome 17)

PS: you should probably use JavaScript to set the right width values on the list items
Well, first of all, your desired functionality is not how tabs in Chrome work, they simply remain a fixed size until there is not enough room, and then they shrink uniformly to fit. (According to [MDN](https://developer.mozilla.org/en/CSS/box-flex), You could accomplish this:

> 
> To make XUL elements in a containing box the same size, set the
>  containing box's equalsize attribute to the value always. This
>  attribute does not have a corresponding CSS property.
>  )
> 
> 
> 

Also, a visual representation of what you are looking for would be very helpful, I found some of the demands rather confusing.

Nonetheless, I've scrapped together [this](http://dabblet.com/gist/1881966). Let me know if it is at all close.

```
ul{
    display: -webkit-box; 
    width:500px; 
    background:lightgray; text-align:left;}
li{background: gray; text-align:center; height:24px; -webkit-box-flex: 1; min-width:30px; max-width:100px; overflow:hidden; text-overflow: ellipsis; }

```