Question

如何创建如上所示的堆栈控件？以下是我尝试过的内容，但是当我在任何一方添加文本时，它会中断。

  div#storage ul.storage li {
      display: inline-block;
      width: 22px;
      height: 10px;
      margin-right: 6px;
      background: green;
  }

  div#storage ul.storage li:nth-child(n+3) {
      background: lightgrey;
  }

http://jsbin.com/tehijapi/15/edit

如何在pure css3中创建这样的堆栈。

Answer 1

您可以使用伪元素（我假设您的内容是静态的）

  ul.storage:before{
    content: 'Storage';
  }
  ul.storage:after{
    content: '25% Usage';
  }

JS Bin Sample | JS Bin Sample with JS assigned data（使用HTML5数据属性）

在css3中创建这样的堆栈控件

1 个答案: