Как изменить ширину блоков?

Question

[Miku Hatsune]

Есть вот такая панелька:



По задумке на маленьких экранах она сворачивается до иконок:


Но я хочу, что бы иконки растягивались на всю ширину родителя и имели одну ширину (20%), но не получается...

вот HTML:

<nav class="uk-navbar">
    <a href="#" class="uk-navbar-brand uk-hidden-small">
        <span class="uk-icon-slack"></span> Project.name
    </a>

    <div class="uk-navbar-flip">
        <ul class="uk-navbar-nav">
            <li class="uk-visible-small">
                <a href="#">
                    <span class="uk-icon-reorder"></span>
                </a>
            </li>
            <li class="uk-visible-small">
                <a href="#">
                    <!-- тут много HTML - сократил -->
                    Messages
                </a>
            </li>
            <li class="uk-visible-small">
                <a href="#">
                    <!-- тут много HTML - сократил -->
                    Events
                </a>
            </li>
        </ul>
    </div>
</div>

Пробовал, через медиа-запросы добавить:

.uk-navbar .uk-navbar-flip .uk-navbar-nav ul li a
{
	width: 20%;
}

Но не получил нужного результата...

Comments

[Miku Hatsune]

MaxKorz: у меня CSS много... фреймворк же

Answer 1

[Петр]

1. Родитель должен сам иметь ширину 100%.
2. Заполняют родителя элементы имеющие display: table-cell;