Добавление элемента между списком

Question

У меня есть пункт меню, который я создал с помощью display:table-cell;, чтобы гарантировать, что вкладки меню «удлиняются», когда пользователь расширяет экран.Однако мне нужно заполнить правую сторону вкладок, чтобы закончить закругленный угол наверху.У меня есть отдельный tabRight.png, который состоит из фрагмента правой стороны вкладки.Мне нужно разместить это прямо перед каждым «открытием вкладки».Я исчерпал все, что знаю, и метод закрытия дверей, который я нашел в Интернете, не работает для этого случая.Правая сторона должна иметь прозрачный угол, поэтому я не думаю, что смогу поместить его поверх существующего серого фона.

Код:

CSS:

#nav ul{
    display:table;
    width:100%;
    border-spacing: 10px;
    margin:0;
    padding:0;
}
#nav li{
    width:20%;
    display:table-cell;
    background: url('tab.png') no-repeat;
    color:#000;
    text-align:center;
    height:31px;
}
#nav a{
    display:block;
    text-decoration:none;
    color:black;
}

p{
    padding:0px;
    margin:0px;
}

HTML:

<div id="nav">
<ul>
    <li>
        <a href="http://www.google.com">
        <div>
            <img src="address.png"/>
            <p>Deadlines</p>
        </div>
        </a>    
    </li>
    <li>About</li>
    <li>Address</li>
    <li>Phone</li>
</ul>
</div>

РЕДАКТИРОВАТЬ:

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

РЕДАКТИРОВАТЬ 2:

Я установил положение tabRight.png на -10px (10px - ширина), и это сдвинуло край вправо, чтобы проблема прозрачности больше не возникала.

Спасибо, ребята, за вашу помощь!

Answer 1

Если вы можете использовать класс псевдоселектора CSS :after, то добавление position:relative; к вашему li и новое правило:

#nav li:after {
    width:5px;
    content:"";
    position:absolute;
    height:100%;
    top:0;
    right:0;
}

добавит элемент вправо всех элементов списка.

Демо здесь (с некоторыми границами, добавленными для ясности)

Answer 2

Просто добавьте еще один промежуток внутри вашей LI, установите его поле справа от достаточно отрицательного числа, чтобы разместить угол.Установите с и высоту соответственно и фоновое изображение угла

Я предлагаю этот метод, поскольку он упрощает написание сценариев для любых функций меню, поскольку все li будут пунктом меню

Answer 3

2 варианта:

Создание класса для изображения tabRight.

.tab-right {
  width: 5px;
  height: 31px;
  background: transparent url('tabRight.png') left top no-repeat;
  display: inline-block;
  zoom: 1; /* for IE7 */
  *display: inline; /* for IE6 */
}

Затем создайте новый <li> элемент:

<li class="tab-right"></li>

Используйте псевдоэлемент :after.

#nav li:after {
  content: "";
  width: 5px;
  height: 31px;
  float: left;
  background: transparent url('tabRight.png') left top no-repeat;
}

Настройте width и height на фактические размеры в пикселях для вашего изображения.