1

Есть nav и шесть пунктов меню. Нужно расположить между 3им и 4ым пунктами квадрат. Добрые люди, подскажите, пожалуйста, каким способом это лучше реализовывать? Между двумя блоками nav вставлять какой-то тег (если да, то какой лучше в данном случае?) или же записать элемент одним из пунктов в меню, тобишь 4ым и их 7 выйдет в общем? Или же есть более приемлемый способ? Вид, как это выглядеть должно, представил ниже:

Пункт1 Пункт2 Пункт3 Элемент(квадрат) Пункт4 Пункт5 Пункт6

2 ответа 2

2

ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

ul li {
  margin-right: 30px;
  position: relative;
}

ul li:nth-child(3)::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  margin-left: 30px;
  height: 20px;
  background-color: red;
}
<nav>
  <ul>
    <li>Home</li>
    <li>Blog</li>
    <li>About</li>
    <li>Contact</li>
    <li>Price</li>
    <li>Other</li>
  </ul>
</nav>

1
0

Динамический вариант на Jquery, вдруг надо кому.

// Всё что не нужно, просто для визуализации.
$('input').on('click', function(){
  let thisVal = $(this).val(),
      elem = $('.nav a');
  if(thisVal == 'add') $('.nav').prepend(elem.eq(0).clone()); else if(elem.length > 1) elem.eq(0).remove();
  ElemCenter();
});

function ElemCenter(){
  $('.nav-middle').remove();
// Начало основного кода
  let elem = $('.nav a').length, // получаем кол-во элементов в nav
      middle = Math.round(elem / 2) - 1, // получаем "середину"
      // Используем math.round до округления до целой.
      elemCenter = $('.nav a').eq(middle);
  elemCenter.after('<span class="nav-middle"></span>');
// Конец основного кода
// Некий лог
console.clear();
console.info('Всего элементов: '+elem);
console.info('Середина после '+(middle+1)+' элемента');
}
ElemCenter();
.nav {text-align: center; font-size: 0;}
.nav a {font-size: 14px; margin-right: 5px;}
.nav a:last-child {margin-right: 0;}
.nav-middle {display: inline-block; width: 20px; height: 20px; background: red; margin-right: 5px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

<input type="button" value="add">
<input type="button" value="remove">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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