Как равномерно распределять пункты меню с помощью CSS, когда ширина и количество не известны?

Я читал много о равномерном распространении элементов с использованием css, но каждое найденное решение требует, чтобы вы знали и определяли ширину и/или количество распределяемых элементов.

У меня есть контейнер с фиксированной шириной - внутри здесь может быть любое количество элементов li автоматической ширины, которые должны распределяться равномерно по родительскому элементу слева направо.

Вот моя разметка - за исключением того, что в них может быть любое количество вкладок с текстом любой длины.

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

So Even Distribution with css, когда количество элементов и ширина динамические - это можно сделать?

Похоже на такую очевидную вещь, которую нужно делать - Damn CSS!

Ответ 1

Для этого можно использовать свойство css display:table-cell. Напишите вот так:

.tabs{
    display:table;
    width:300px;
    border:1px solid green;
}
.tabs li{
    display:table-cell;
    border:1px solid red;
    height:40px;
}

Отметьте http://jsfiddle.net/px7Uf/

Ответ 2

Вот решение, которое сохраняет даже ширину, когда содержимое переполняет выделенную ширину ячейки, используя flexbox:

ul.tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.tabs>li.tab {
  flex: 1;
  text-align: center;
  /* just adding visibility to the tabs */
  border: 1px solid rgba(0,0,0,.12); 
  padding: 10px;
}

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3. This is a very long tab and should overflow...</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>