У меня есть два меню: один закреплен на дне, а другой - на вершине. Моя проблема в два раза. Я хочу, чтобы они отображались в центре экрана и были только шириной их содержимого (вместо того, чтобы быть текучим по умолчанию).
Я ничего не нашел в документации, чтобы указать, что это возможно, поэтому предположительно решение состоит в том, чтобы изменить его с помощью CSS?
Любая помощь будет принята с благодарностью.
Используйте семантический ui-класс "compact" для вашего меню пользовательского интерфейса для настройки контента, а затем используйте сетки и столбцы для выравнивания по центру. Так, например:
<div class="ui centered grid">
<div class="center aligned column">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
</div>
JSFiddle Ссылка: http://jsfiddle.net/pLskpufp/2/
Вы также можете использовать контейнер с выравниванием по центру:
<div class="ui center aligned container">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
JSFiddle Ссылка: http://jsfiddle.net/377v6ect/1/
Я знаю, что это не чистый Semantic UI-решение, но для тех из вас, кто ищет способ сделать это с помощью фиксированного меню в Semantic UI, лучшее решение, которое я нашел до сих пор, - это обернуть его в div с помощью небольшой пользовательский CSS.
<div className="fixed bottom">
<div className="ui centered grid">
<div className="center aligned column">
<!-- Your Semantic UI menu here, but not fixed. -->
</div>
</div>
</div>
Наряду с этим css...
div.fixed {
width: 100%;
position: fixed;
}
div.fixed.bottom {
bottom: 0;
}
div.fixed.top {
top: 0;
}