html - 完全填充 ol 列表项的背景颜色

Question

CODEPEN 上的实例

我想让background-color: papayawhip;on.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>

SCSS 或更少

li
  {
      padding: 10px 0;
      margin: 10px 0;
      color: #ccc;
      a
        {
          color: #ccc;
          text-decoration: none;
        }
  }

.active
  {
    position:relative;
    background-color: papayawhip;
    color: #333;

    &:before
      {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -64px;
        width: 5px;
        background: #f26645;        
      }

    a
      {
        color: #333;   
      }

  }


ol
  {
    list-style-type: decimal-leading-zero;
    padding-left: 64px;
  }

Answer 1

这对你的 scss/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;
  }

http://codepen.io/anon/pen/oLgqJ