Как разместить изображение между элементами горизонтального списка

Question

У меня возникли проблемы с решением проблемы здесь. У меня есть меню со списком элементов списка. Однако вместо стандартной границы есть перерыв сверху и снизу.

Единственное решение, с которым я столкнулся, - использовать li:after в CSS, чтобы поместить изображение, но по какой-то причине отступы и разметка все испортились. Пока у меня есть CSS и HTML, встроенные ниже (я использую Bootstrap в качестве рамки здесь).

Любые идеи о том, как заставить эти бары работать?

Скриншот:

(Не обращайте внимания на красный цвет ... вещи перепутались в иллюстратор).

 #reviews .review-actions { 
 
     text-align: center; 
 
     z-index: 2; 
 
     padding-top: 1px; 
 
     } 
 
     #reviews nav { 
 
     display:inline-block; 
 
     margin:0 auto; 
 
     } 
 
     #reviews nav ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     } 
 
     #reviews nav ul li{ 
 
     display: inline; 
 
     margin: 0; 
 
     float: left; 
 
     padding: 10px; 
 
     background-color: #fff; 
 
     font-size:1.2em; 
 
     } 
 
     /*#reviews nav ul li:after{ 
 
     content: url('./img/menu-splitter.png'); 
 
     }*/ 
 
     #reviews nav ul > li:first-child { 
 
     border-top-left-radius: .5em; 
 
     border-bottom-left-radius: .5em; 
 
     border: 1px solid #ccd0d0; 
 
     border-right: none; 
 
     } 
 
     #reviews nav ul > li:nth-child(2){ 
 
     border: 1px solid #ccd0d0; 
 
     border-right: none; 
 
     border-left: none; 
 
     } 
 
     #reviews nav ul > li:last-child { 
 
     border-top-right-radius: .5em; 
 
     border-bottom-right-radius: .5em; 
 
     border: 1px solid #ccd0d0; 
 
     border-left: none; 
 
     } 
 
     #reviews nav ul li a{ 
 
    
 
     }

<section id='reviews'> 
 
     <!-- Navigation --> 
 
     <div class="review-actions"> 
 
      <nav> 
 
      <ul> 
 
       <li><a href='#'>The App</a></li> 
 
       <li><a href='#'>Our Service</a></li> 
 
       <li><a href='#'>Surprises</a></li> 
 
      </ul> 
 
      </nav> 
 
     </div> 
 
     </section>

Answer 1

Вы можете установить его непосредственно на фоне литий

#reviews .review-actions { 
 
     text-align: center; 
 
     z-index: 2; 
 
     padding-top: 1px; 
 
     } 
 
     #reviews nav { 
 
     display:inline-block; 
 
     margin:0 auto; 
 
     } 
 
     #reviews nav ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     } 
 
     #reviews nav ul li{ 
 
     display: inline; 
 
     margin: 0; 
 
     float: left; 
 
     padding: 10px; 
 
     background-color: #fff; 
 
     font-size:1.2em; 
 
     } 
 
     /*#reviews nav ul li:after{ 
 
     content: url('./img/menu-splitter.png'); 
 
     }*/ 
 
     #reviews nav ul > li:first-child { 
 
     border-top-left-radius: .5em; 
 
     border-bottom-left-radius: .5em; 
 
     border: 1px solid #ccd0d0; 
 
     border-right: none; 
 
     } 
 
     #reviews nav ul > li:nth-child(2){ 
 
     border: 1px solid #ccd0d0; 
 
     border-right: none; 
 
     border-left: none; 
 
     } 
 
     #reviews nav ul > li:last-child { 
 
     border-top-right-radius: .5em; 
 
     border-bottom-right-radius: .5em; 
 
     border: 1px solid #ccd0d0; 
 
     border-left: none; 
 
     } 
 
     #reviews nav ul li a{ 
 
    
 
     } 
 
     li:nth-last-child(n+2) { 
 
      background-image: linear-gradient(blue, blue); 
 
      background-size: 2px 90%; 
 
      background-repeat: no-repeat; 
 
      background-position: right center; 
 
     }

<section id='reviews'> 
 
     <!-- Navigation --> 
 
     <div class="review-actions"> 
 
      <nav> 
 
      <ul> 
 
       <li><a href='#'>The App</a></li> 
 
       <li><a href='#'>Our Service</a></li> 
 
       <li><a href='#'>Surprises</a></li> 
 
      </ul> 
 
      </nav> 
 
     </div> 
 
     </section>

Answer 2

One S olution заключается в развертывании 4 однопиксельных ширинов box-shadows вокруг <ul> как искусственной границы, а затем дать <ul> фактической границе один и тот же цвет, что и <li>background-color:

 #reviews .review-actions { 
 
     text-align: center; 
 
     z-index: 2; 
 
     padding-top: 1px; 
 
     } 
 

 
     #reviews nav { 
 
     display:inline-block; 
 
     margin:0 auto; 
 
     } 
 

 
     #reviews nav ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     border: 6px solid #ffffff; 
 
     box-shadow: 1px 1px #ccd0d0, -1px 1px #ccd0d0, -1px -1px #ccd0d0, 1px -1px #ccd0d0; 
 
     border-radius: .5em; 
 
     } 
 

 
     #reviews nav ul li{ 
 
     display: inline; 
 
     margin: 0; 
 
     float: left; 
 
     padding: 10px; 
 
     background-color: #fff; 
 
     font-size:1.2em; 
 
     border-left: 1px solid #ccd0d0; 
 
     } 
 

 
     #reviews nav ul > li:first-child { 
 
     border-left: none; 
 
     }

 <section id='reviews'> 
 
     <!-- Navigation --> 
 
     <div class="review-actions"> 
 
      <nav> 
 
      <ul> 
 
       <li><a href='#'>The App</a></li> 
 
       <li><a href='#'>Our Service</a></li> 
 
       <li><a href='#'>Surprises</a></li> 
 
      </ul> 
 
      </nav> 
 
     </div> 
 
     </section>