выравнивание текста выпадающего меню, css работает, но загрузка завершается неудачно? - PullRequest
0 голосов
/ 17 апреля 2019

У меня есть это выпадающее меню, пункты его подменю выровнены по центру текста.Я хочу изменить это, чтобы выровнять влево.Пожалуйста, посмотрите: enter image description here С "обычным" css я могу это сделать (как указывает стрелка вправо, это меняет пункт подменю, и это работает).Но я изучаю начальную загрузку (что означает внесение изменений в html, а не в css?), Я пробовал два метода (без изменения css), первый изменял меню «родителя», над левой стрелкой, которую я добавил:

dropdown-menu-left

Не удалось.Итак, вторым способом я попытался изменить элемент подменю, как и вышеупомянутый «обычный» CSS, добавив туда, где указала стрелка влево:

justify-content-left
Это тоже не удалось.Кто-нибудь может сказать, пожалуйста, почему?- Я думаю, это то же самое, что и «обычный» CSS.

Для получения дополнительной информации: я говорю об этой странице: https://better4living.github.io/what_can_i_afford.html пожалуйста, посмотрите на панель навигации -> Калькуляторы.

Обратите внимание: этот вопрос касается начальной загрузки!

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Следующий CSS в строке 2906 в mbr-additional.css выравнивает центр и устанавливает отображение элементов привязки.

.cid-rnIE1P2zsv .nav-item a {
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0 !important;
    margin: 0rem .65rem !important;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

элемент привязки

<a class="dropdown-item text-white display-4" href="monthly_payment.html">
  Monthly Payment
</a>

  • Самый простой способ - сбросить display элементов привязки.Для этого используйте display:inline !important или d-inline, если вы используете Bootstrap-4

  • Поскольку якорные элементы уже flex, вам нужно использовать только justify-content: start чтобы выровнять их влево.Если вы используете Bootstrap-4, используйте justify-cotent-start.
1 голос
/ 17 апреля 2019

Использование должно использовать .d-flex и затем добавить этот класс .justify-content-start

Примечание: начальная загрузка V4

<a href="monthly_payment.html" class="dropdown-item text-white display-4 d-flex justify-content-start ">Monthly Payment</a>

Проверьте это для более justify-content

...