Html 完全填充ol列表项的背景色

我想要

背景色：木瓜鞭打开
.active
用屏幕左侧的红色条连接。实现这一点的最佳方法是什么。我想保持代码笔中显示的相同间距


html

<ol class="meny-control"> 
  <li class="active"><a href="">Potential Apparel</a></li>
  <li><a href="">Facebook + Pillow</a></li>
  <li><a href="">Skatelocal.ly</a></li>
  <li><a href="">Cooking.is</a></li>
  <li><a href="">Foodsters</a></li>
</ol>

对于您的SCS/less，这个如何：

li
  {
      padding: 10px 0;
      margin: 10px 0;
      color: #ccc;
      padding-left: 32px;
      border-left: 5px solid transparent;
      a
        {
          color: #ccc;
          text-decoration: none;
        }
  }

.active
  {
    position:relative;
    background-color: papayawhip;
    color: #333;
    border-left: 5px solid #f26645;
    a
      {
        color: #333;   
      }

  }


ol
  {
    list-style-type: decimal-leading-zero;
    list-style-position: inside;
  }

事实上，如果您将
li
元素上的
左填充更改为
26px
，则间距是完全相同的（当然，这取决于浏览器应用于
ol
元素的默认填充，并且您正在使用某种css重置，我希望：））
li
  {
      padding: 10px 0;
      margin: 10px 0;
      color: #ccc;
      padding-left: 32px;
      border-left: 5px solid transparent;
      a
        {
          color: #ccc;
          text-decoration: none;
        }
  }

.active
  {
    position:relative;
    background-color: papayawhip;
    color: #333;
    border-left: 5px solid #f26645;
    a
      {
        color: #333;   
      }

  }


ol
  {
    list-style-type: decimal-leading-zero;
    list-style-position: inside;
  }