Question

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.

Thanks.

Answer 1

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

ul { 
  display: table;
  width:100%;
  padding: 0;

  border: 1px solid #000
}

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

  border: 1px solid #c00
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>