Question

我有一个导航菜单，我在每个li之后添加一个分隔图像使用:after和:before。

但我无法按照移动设备对其进行响应。

请查看fiddle

图像最初没有从左侧开始，并且根据设备宽度没有响应。

HTML

<ul class="menu-nav-toggle">
    <li><a href="/pages/about">About us</a></li>
    <li><a href="/pages/faq">Faqs</a></li>
    <li><a href="/pages/contact">Contact Us</a></li>
    <li><a href="/pages/myaccount">My Account</a></li>
    <li><a href="/pages/cart">My cart</a></li>
    <li><a href="step1">Step</a></li>
    <li><a href="/pages/offers">Offers</a></li>
<ul>

CSS

   .menu-nav-toggle li:first-child:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 5px;
      display: inline-block;
      background-position: center;
      background-image: url(http://i.imgur.com/4jJVvVX.png);
      background-repeat:no-repeat;
      top: 0;
      }

   .menu-nav-toggle li:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 5px;
      display: inline-block;
      background-position: center;
      background-image: url(http://i.imgur.com/4jJVvVX.png);
      background-repeat:no-repeat;
      bottom: 0;
      left: 0;
      }

请帮忙。

Answer 1

你希望这样吗。

演示：http://jsfiddle.net/rekxgcq9/3/

      .menu-nav-toggle li:first-child:before { background-position:left;}
      .menu-nav-toggle li:after{background-position:left;}

根据移动设备拉伸分频器图像

1 个答案: