Размещение элемента в середине nav

115

08 августа 2019, 16:10

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

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

Answer 1

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>

Answer 2

Динамический вариант на 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">