Выровнять дочерние элементы по ширине

1-ый способ: Display table

Данный способ рекомендуется использовать, если сайт поддерживает браузер IE ниже 10 версии, иначе рекомендуется использовать второй способ.

li {
    display: table-cell;
    width: 1%;
}

2-ой способ: HTML 5

В HTML 5 появился новый тип отображения объектов — display: flex, который позволяет выравнивать все дочерние объекты по ширине.

ul {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
}

li {
    -ms-flex: 1; /* IE 10 */
    flex: 1;
}