1

У меня есть список из 10-ти элементов. Необходимо вставить 2 строки:

  • перед первыми 4-мя элементами - строку "Строка 1"
  • перед вторыми 4-мя элементами - строку "Строка 2".

Пробую через CSS псевдоэлементы (after, before) и свойство content: "Строка". Текст вставляется не корректно и размещается внутри рамки 1-го и 5-го элемента. Пробовала играться с position: absolute - этот вариант тянет за собой усложненный код особенно при верстке адаптивки. Может кто-то знает более простой вариант?

ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none outside;
    clear: both;
}
ul li {
    float: left;
    padding: 0;
    margin: 0 15px 15px 0;
    position: relative;
    width: 22%;
    border: 1px solid #ddd;
}
li.first {
    clear: both;
}
<ul>
  <li class="product first">Item 1</li>
  <li class="product">Item 2</li>
  <li class="product">Item 3</li>
  <li class="product last">Item 4</li>
  <li class="product first">Item 5</li>
  <li class="product">Item 6</li>
  <li class="product">Item 7</li>
  <li class="product last">Item 8</li>
  <li class="product first">Item 9</li>
  <li class="product">Item 10</li>
</ul>

3
  • Уточните зачем нужно вставлять элемент и почему это не выходит другими методами. Ведь можно вставить скриптом или руками написать в html.
    – user347472
    Commented 22 окт. 2020 в 12:14
  • Это список категорий товаров woocomerce в WP. При этом первые 4 пункта относятся к одному типу и хотелось бы это указать, а все остальные относятся к другому типу. Товары - это софт. Категории - это области, где используется данный софт. Поэтому перед первыми 4-мя категориями нужно указать, что это категории товаров (софта) сгруппированные "По отраслям", а перед остальными (с 5-го по последний) - указать, что это категории товаров, сгруппированные " По вендорам"
    – Анна
    Commented 22 окт. 2020 в 12:26
  • @Анна как вам моё решение? Commented 28 окт. 2020 в 14:27

4 ответа 4

1

function createNode({nodeName, nodeClasses, nodeText}) {
  const node = document.createElement(nodeName);
  node.classList.add(...nodeClasses);
  node.innerText = nodeText;
  return node;
}

const productItem1 = document.querySelector('.product__item:nth-of-type(1)');
const blockBeforeItem1 = createNode({
  nodeName: 'div',
  nodeClasses: ['product__title'],
  nodeText: 'Строка 1'
});
productItem1.before(blockBeforeItem1);

const productItem4 = document.querySelector('.product__item:nth-of-type(4)');
const blockAfterItem4 = createNode({
  nodeName: 'div',
  nodeClasses: ['product__title'],
  nodeText: 'Строка 2'
});
productItem4.after(blockAfterItem4);
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.product__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.product__item {
  border: 2px solid #ddd;
}

.product__title {
  grid-column: 1 / 4;
  background-color: red;
  padding: 10px 0;
  color: white;
}
<ul class="product__container">
  <li class="product__item">Item 1</li>
  <li class="product__item">Item 2</li>
  <li class="product__item">Item 3</li>
  <li class="product__item">Item 4</li>
  <li class="product__item">Item 5</li>
  <li class="product__item">Item 6</li>
  <li class="product__item">Item 7</li>
  <li class="product__item">Item 8</li>
  <li class="product__item">Item 9</li>
  <li class="product__item">Item 10</li>
</ul>

2
  • У Вас все элементы добавились ниже всех списков и это не то, что мне надо. Выше скриншот как мне надо, чтоб было. Может кто-то подскажет еще варианты?
    – Анна
    Commented 28 окт. 2020 в 13:36
  • @Анна ваш вопрос такой: У меня есть список из 10-ти элементов. Необходимо вставить 2 строки: перед первыми 4-мя элементами - строку "Строка 1" перед вторыми 4-мя элементами - строку "Строка 2". если вы хотите что-то другое, отредактируйте вопрос. Я дал ответ, релевантный вопросу Commented 28 окт. 2020 в 17:15
0

например так:

ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none outside;
    clear: both;
}
ul li {
    padding: 0;
    margin: 0 15px 15px 0;
    position: relative;
    width: 22%;
    border: 1px solid #ddd;
}

ul li:after {
    content: "XXX";
}

ul li:nth-child(n + 5):after {
    content: "YYY";
}

ul li:nth-child(n + 9):after {
    content: "";
}
<ul>
  <li class="product">Item 1</li>
  <li class="product">Item 2</li>
  <li class="product">Item 3</li>
  <li class="product">Item 4</li>
  <li class="product">Item 5</li>
  <li class="product">Item 6</li>
  <li class="product">Item 7</li>
  <li class="product">Item 8</li>
  <li class="product">Item 9</li>
  <li class="product">Item 10</li>
</ul>

0

Как-то так

ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none outside;
    clear: both;
}
ul li {
    float: left;
    padding: 0;
    margin: 0 15px 15px 0;
    position: relative;
    width: 22%;
    border: 1px solid #ddd;
}
li.first {
    clear: both;
}
<h2>Строка 1</h2>
<ul>
  <li class="product first">Item 1</li>
  <li class="product">Item 2</li>
  <li class="product">Item 3</li>
  <li class="product last">Item 4</li>
</ul>
  <h2>Строка 2</h2>
  <ul>
  <li class="product first">Item 5</li>
  <li class="product">Item 6</li>
  <li class="product">Item 7</li>
  <li class="product last">Item 8</li>
  <li class="product first">Item 9</li>
  <li class="product">Item 10</li>
</ul>

1
  • у меня список категорий товаров в woocomerce wp, он не бьется на 2 части
    – Анна
    Commented 22 окт. 2020 в 12:54
0

Как у Вас ниже - это не то, что мне нужно. Строка добавляется в рамке перед всеми элементами. Единственное до чего додумалась это вот так, но это усложняет код и верстку адаптивки и как по мне это черти что:

ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none outside;
    clear: both;
}
ul li {
    float: left;
    padding: 0;
    margin: 0 15px 15px 0;
    position: relative;
    width: 22%;
    border: 1px solid #ddd;
}
li.first {
    clear: both;
}
/* Добавила */
ul li:nth-child(1)::before {
    position: absolute;
    top: -70px;
    width: 100%;
    padding: 15px 0;    
    content: 'По отраслям';
}
ul li:nth-child(5)::before {
    position: absolute;
    top: -70px;
    width: 100%;
    padding: 15px 0;    
    content: 'По вендорам';
} 
ul li:nth-child(n){
    margin-top: 50px;
} 
ul li:nth-child(n + 9){
    margin-top: 0;
}
<ul>
  <li class="product first">Item 1</li>
  <li class="product">Item 2</li>
  <li class="product">Item 3</li>
  <li class="product last">Item 4</li>
  <li class="product first">Item 5</li>
  <li class="product">Item 6</li>
  <li class="product">Item 7</li>
  <li class="product last">Item 8</li>
  <li class="product first">Item 9</li>
  <li class="product">Item 10</li>
</ul>
Должно быть вот так: screenshot

Может кто знает вариант попроще?

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.