CSS → Равномерное выравнивание блоков по ширине

Очень распространённая задача — равномерно выровнять пункты меню неизвестного размера по ширине контейнера:

Решение:

HTML

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
</ul>

CSS

ul {
  text-align: justify;
  line-height: 0;
  
  /* Opera Presto */
  font-size: 1px;
  
  /* IE6-7 */
  text-justify: newspaper; 
  zoom: 1;
  text-align-last: justify;
}
ul:after {
  width: 100%;
  height: 0px;
  visibility: hidden;
  overflow: hidden;
  content: "";
  display: inline-block;
}
ul li  {
  display: inline-block;
  text-align: left;

  /* Восстанавливаем обнулённые свойства */
  line-height: normal;
  font-size: 14px;

  /* Opera Presto */
  vertical-align: top;

  /* IE6-7 */
  //display : inline;
  //zoom : 1;
}

Работает в Firefox 8+, Opera 11.51+, IE6+, Safari 5.1+, Chrome.
Демо.

Почему именно так — подробно расписано в статье на css-live.ru.
Плюс недавно вышло обновление способа с использованием Flexbox.