Arhn - архитектура программирования

Woocommerce: виджет категории товаров

Я использую Wordpress для разработки своего веб-сайта, плагина Woocommerce и темы Savoy.

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

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

 ul.children .cat-item > a::before{
 content: '';
 display: inline-block;
 width: 17px;
 height: 17px;
 -moz-border-radius: 7.5px;
 -webkit-border-radius: 7.5px;
 border-radius: 7.5px;
 background-color: white;
 margin-right: 9px;
 margin-bottom:-1px;
 cursor: pointer;
 }

Проблема в том, что текст находится под кружками, например: ›введите здесь описание изображения < / а>;

Я бы хотел, чтобы круги и текст были выровнены в один столбец без текста под кругами, например: ›введите здесь описание изображения

Если у кого-то есть решение моей проблемы, я был бы очень признателен за вашу помощь!

wordpress css woocommerce wordpress-theming css-selectors
14.01.2021

Ответы:


1

Посмотрите, хотите ли вы этого.

ul {
  list-style: none;
}

li {
  width: 80px;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

ul li::before{
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 17px;
   height: 17px;
   -moz-border-radius: 7.5px;
   -webkit-border-radius: 7.5px;
   border-radius: 7.5px;
   background-color: red;
   margin-right: 9px;
   margin-bottom:-1px;
   cursor: pointer;
 }
<ul>
  <li>Test</li>
  <li>Very long text</li>
 </ul>

14.01.2021
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..