如何使用CSS调整水平以适应html元素？

Question

我正在尝试使用CSS模拟Safari / Chrome标签页（不使用表格）。

所有元素在条形图上以内联方式显示为（display：inline-block）。该栏是容器上的一个块，可以随窗口调整大小。

向该栏添加元素的最简单方法是什么，如果它们不像表格中的列那样拟合，那么它们将被调整大小：固定。

感谢。

Answer 1

您应该使用display: table-cell代替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>