Выровнять центр текстового меню семантического интерфейса

3757 просмотра

1 ответ

3049 Репутация автора

Я новичок в семантическом пользовательском интерфейсе, и я стараюсь, чтобы некоторые отзывчивые текстовые пункты меню в верхней части моей страницы всегда были выровнены по центру страницы. Вот пример моего кода .

<div class="ui text menu">
    <a class="blue item" href="#">Home</a>
    <a class="blue item" href="#">About</a>
    <a class="blue item active" href="#">Contact</a>
</div>

Я попытался использовать макет на основе сетки и многие другие подходы, которые предлагаются в сети, но все они связаны с компактными меню, которые не работают с текстовыми меню.

Автор: manman Источник Размещён: 18.07.2016 05:07

Ответы (1)


0 плюса

3049 Репутация автора

Решение

Завершается использованием следующего фрагмента кода:

<div class="ui relaxed grid">
    <div class="five wide column"></div>
    <div class="six wide column">
        <div class="ui grid text menu">
            <div class="five wide column">
                <a class="yellow item" href="#">Home</a>
            </div>
            <div class="five wide column">
                <a class="yellow item" href="#">About</a>
            </div>
            <div class="five wide column">
                <a class="yellow item active" href="#">Contact</a>
            </div>
        </div>
    </div>
    <div class="five wide column"></div>
</div>

ссылка jsFiddle

По сути, я создал сетку над своим меню, а также обернул каждый элемент меню в div. Это дает гибкость при фиксации правого и левого полей, а также добавляет пространство при необходимости между каждым пунктом меню.

Автор: manman Размещён: 19.07.2016 05:44
Вопросы из категории :
32x32