Jquery Mobile Center и использовать полную ширину экрана с 3 кнопками

0

Я пытаюсь получить 3 кнопки, чтобы использовать полную ширину экрана и при необходимости изменить размер. Однако, когда я пытаюсь использовать свой код, он не будет центрироваться. Пробовал использовать марк-левый margin-right auto на кнопках, но, похоже, я не могу заставить его работать.

HTML выглядит так:

<div id="overview-content">
<div id="navgroup" data-role="controlgroup" data-type="horizontal">
    <button class="ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-star">Aktivitet</button>
    <button class="ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-home">Grupp</button>
    <button class="ui-btn ui-shadow ui-btn-icon-left ui-btn-a ui-icon-mail">Meddelande</button>
</div>

И CSS:

#navgroup {
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
}

#overview-content {
    margin: 0px;
    padding: 0px;
}

.ui-controlgroup-controls {
    width: 100%;

}

.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
.ui-controlgroup-controls .ui-btn-icon-notext {
    width: 25%;
}
  • 0
    Где вы используете CSS-класс "ui-controlgroup-controls"?
  • 0
    Добавляется jquery mobile во время инициализации автоматически.
Теги:
jquery-mobile

2 ответа

0

Попробуйте изменить свой CSS на

#navgroup {
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
}
.ui-controlgroup-controls {
    width: 500px;
    max-width: 100%;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn, .ui-controlgroup-controls .ui-btn-icon-notext {
    box-sizing: border-box;
    width: 33.33%;
}

Вот ДЕМО

Правило border-box гарантирует, что граница и дополнение включены в ширину элемента при калибровке. Таким образом, каждая кнопка занимает одну треть контейнера управления ui-controlgroup, а этому контейнеру задается ширина набора. Когда экран шире, чем установленная ширина, он центрируется по правилу text-align: center, а когда экран более узкий, правило max-width хранит его внутри страницы.

Поделиться
0

Чтобы центрировать кнопки, вы хотите, чтобы они блокировали элементы уровня, а затем, чтобы дать им гибкую ширину, вы дадите кнопкам процент для width-, как показано ниже:

button {
display: block;
margin: 0 auto;
text-align: center;
width: 80%;
}
Поделиться
  • 0
    По некоторым причинам это не относится к кнопкам, думаю, я пробовал это, но со встроенным блоком. Дело в том, что я хочу, чтобы 3 кнопки всегда занимали все пространство экрана.
  • 0
    Вы не захотите использовать inline-block, если не хотите, чтобы они были рядом. Проверьте мое дополнение CSS здесь: jsfiddle.net/TLmav
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню