CSS的第一部分

html部分

• 衣食住行有前面的一个样式，需要在reset里面将样式设置为nonelist-style:none;
• 在<li></li>里面的内容不能在背景里竖直居中：
  • 因为是单行文字，所以line-height：$h;
  • 若是多行的文字就用别的方式；
• 有下划线，就是在底部加一个 border-bottom:1px solid;

 <div class="tags">
        <ul class="current">
          <li>衣</li>
          <li>食</li>
          <li>住</li>
          <li>行</li>
        </ul>
        <div class="new">
          <button >新增标签</button>
        </div>
      </div>

样式部分

.tags {
    font-size:14px;
    padding:16px;
  > .current {
    display: flex;
    > li {
      background: #d9d9d9;
      $h:24px;
      height:$h;
      line-height:$h;
      border-radius:$h/2;
      padding:0 16px;
      margin-right:12px;

    }
  }
  > .new{
      padding-top: 16px;
      button{
      background:transparent;
      border:none;
      border-bottom:1px solid;
      padding:0 6px;

      }
  }
}

效果