Elie Elie - 4 months ago 21
CSS Question

How can I resize to fit html elements horizontally using CSS?

I'm trying to emulate the Safari / Chrome tabs using CSS (without using tables).

All elements are displayed inline as (display: inline-block) on a bar. That bar is a block on a container that resizes with the window.

What is the simplest way to add elements to that bar so that they'll be resized if they're not fitting just like columns in a table with the table-layout: fixed.



you should use display: table-cell instead of display: inline-block -

ul { 
  display: table;
  padding: 0;

  border: 1px solid #000

li {
  display: table-cell;
  text-align: center;
  width: auto;

  border: 1px solid #c00