Блог

Главная - Вопросы по программированию - WordPress Двадцать Семнадцатая тема, разделяющая подменю на 2 колонки

WordPress Двадцать Семнадцатая тема, разделяющая подменю на 2 колонки

#css #wordpress #submenu #two-columns #twentyseventeen

Вопрос:

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

Я попытался добавить в область «Дополнительный CSS» в разделе «Настройка» следующее… но ничего не изменилось.

 .sub-menu-columns ul.sub-menu li {
    clear: initial;
    display: inline-block;
    float: left;
    width: 50%;
} 
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 300px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
}

Я тоже пробовал это… безрезультатно…

 .sub-menu-columns ul.sub-menu li {
  display: inline-block;
  float: left;
  width: 200px;
}

.sub-menu-columns ul.sub-menu li:nth-child(odd) {
  float: left;
  margin-right: 10px;
}

.sub-menu-columns ul.sub-menu li:nth-child(even) {
  float: right;
}

Я тоже пробовал это… но затем столбец подменю стал шире, но он по-прежнему не разделял элементы на 2 столбца…

 .sub-menu {
    width: 410px;
}
.sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
}

Я не знаю, как писать код, поэтому это то, что я нашел в Интернете, чтобы попробовать. Я ценю любую помощь!

Комментарии:

1. Я только что попробовал то, что нашел… ul{ столбцы: 2; } тем не менее, это заставило все мое меню перейти в 2 столбца вместо простого подменю (неудивительно), но что мне добавить к этому, чтобы сделать его просто подменю… Я попытался изменить его на этот… .подменю ul{ столбцы: 2;}, но затем он вернулся к обычному меню с одной строкой и подменю с одной строкой?

Ответ №1:

Я нашел это и попробовал, и это сработало!

 .sub-menu {
  columns: 2;
}

Я знал, что это должно быть что-то простое, я просто не видел…
Может быть, этот пост поможет кому-то еще.

Метки: ,