Как выровнять последние 3 пункта меню справа - Главное меню WordPress

Question

Как выровнять последние 3 пункта меню справа - Главное меню WordPress

27 мар. 2015 г., 02:50:09

Просмотры: 25.2K

Голосов: 0

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

Это создаст видимость двух меню (с элементами входа и т.д. справа), но позволит легко изменить стиль для создания адаптивного меню с последними тремя пунктами внизу.

МЕНЮ:

<UL> 
<li>1a</li><li>2a</li><li>3a</li> <-слева    справа-> <li>4a</li><li>5a</li><li>6a</li>
</UL>

Использование float: left и float: right приводит к изменению порядка последних 3 элементов, но мне нужно, чтобы они оставались в исходном порядке.

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

Я пробовал различные комбинации display:inline-block и text-align:left/right, но безуспешно.

РЕДАКТИРОВАНИЕ: Я хотел бы сделать это без добавления разметки в само меню. (Если только ответ также не показывает, как добавить разметку в горизонтальное меню WordPress.)

AJD

349

меню

Комментарии

Это чисто проблема CSS и, вероятно, лучше подходит для StackOverflow.

Howdy_McGee

27 мар. 2015 г. 05:37:13

Я понимаю, что вы имеете в виду. Изначально я не указал в вопросе, что речь идет о меню Wordpress. Однако вопрос касается именно меню Wordpress, иначе ответ, данный Andrei Gheorghiu, тоже был бы приемлемым. Но в меню Wordpress, я не думаю, что так просто добавить HTML-разметку в определенных местах.

AJD

28 мар. 2015 г. 05:23:39

Не имеет значения, WordPress это меню или нет, как видно из ответа, для решения проблемы нет ничего специфичного для WordPress.

cybmeta

28 мар. 2015 г. 11:38:33

Все ответы на вопрос

Вам нужно обернуть две группы элементов (выровненных по левому и правому краю) в два контейнера. Затем установите для этих контейнеров свойство float со значением left и right соответственно.

<UL> 
    <div class="pull-left"><li>1a</li><li>2a</li><li>3a</li></div>
    <div class="pull-right"><li>4a</li><li>5a</li><li>6a</li></div>
</UL>

Убедитесь, что внутренние элементы имеют свойство display со значением inline-block. Также рекомендуется установить свойство overflow для элемента ul в значение 'hidden', чтобы он расширялся и содержал все дочерние элементы, так как оба контейнера являются плавающими.

.pull-left { float: left; }
.pull-right { float: right; }
.pull-left li, .pull-right li { display: inline-block; }
ul { overflow: hidden; }

Установка overflow: hidden для всех элементов ul в вашем проекте может быть не самой лучшей идеей, поэтому рекомендуется найти родительский селектор для вашего ul и добавить его перед селектором ul. (например: .some-container-class-here ul { overflow: hidden;} )

tao

985

27 мар. 2015 г. 03:12:01

Комментарии

Я понимаю, как это может работать, но поскольку это меню WordPress, я не знаю, как добавить дополнительную разметку.

AJD

28 мар. 2015 г. 05:20:06

cfx 1.58K · Accepted Answer · 2015-03-27T04:20:57Z

Есть более простой способ без изменения разметки и с минимумом CSS. Живая демонстрация/пример здесь, код ниже:

<ul> 
  <li>1a</li><li>2a</li><li>3a</li><li>4a</li><li>5a</li><li>6a</li>
</ul>

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}
li {
    float: left;
}
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
    float: none;
    display: inline-block;
}

cfx

1.58K

27 мар. 2015 г. 04:20:57