Elie Elie - 17 days ago 6
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.

Thanks.

Answer

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>

Comments