html - 列表 Material Design 组件 - 在 HTML 中？

Question

<分区>

Answer 1

正在关注 https://www.google.com/design/spec/components/lists.html
并使用最灵活的方式实现所需(使用 display: table/row/cell)

*{
  box-sizing: border-box;
}
body{
  margin: 0;
  font:   16px/1.3 'Roboto', sans-serif;
  color:  #333;
}
h1, h2{
  font-weight:200;
}

/* Material Design Lists - by Roko CB
 - https://www.google.com/design/spec/components/lists.html
 - http://stackoverflow.com/a/33312676/383904
*/

/*
Material Design - Icons
*/

[class^=mad-icon-]{
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  background: #999 50% / cover;
  color: #fff;
}
.mad-icon-24{
  width:  24px;
  height: 24px;
}
.mad-icon-32{
  width:  32px;
  height: 32px;
}
.mad-icon-40{
  width:  40px;
  height: 40px;
}

/*
Material Design - Lists
*/

ul.mad-list{
  display: table;
  width: 100%;
  padding: 8px 0; /* 8 padding T/B */
  margin: 0;
  list-style: none;
}
ul.mad-list li{
  display: table-row;
  height: 48px; /* that's actually min-height for rows */
}
ul.mad-list li > *{
  /* Align always to middle */
  display: table-cell;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
ul.mad-list li > *:first-child{
  /* Whoever is the first child it needs 16px left space */
  padding-left: 16px;
  background: rgba(0,255,0,0.05);
}
ul.mad-list li > *:last-child{
  /* Whoever is the last child it needs 16 right space */
  padding-right: 16px;
}
ul.mad-list .mad-list-icon{
  /* Always left-align! Don't center icons */
  width: 72px; /* 72-16 but we already use box-sizing */
}
ul.mad-list .mad-list-text{
  background: rgba(0,0,255,0.05);
}
ul.mad-list .mad-list-icon-secundary{
  /* Secundary actions will have already 16 right padding 
  since it's :last-child but it needs also a left 16*/
  padding-left: 16px;
  width: 1px; /* Always h-center align content */
  text-align: center; /* Just to make sure if we use combinations of larger icons */
  background: rgba(255,0,255,0.05)
}

/*
Special classes
*/
.border-bottom{
  border-bottom:1px solid rgba(0,0,0,0.1);
}

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


<ul class="mad-list">
  <li>
    <div class="mad-list-text">
      <p>Single-line item</p>
    </div>
  </li>
  <li>
    <div class="mad-list-text">
      <p>Single-line item</p>
    </div>
  </li>
</ul>

<ul class="mad-list">
  <li>
    <div class="mad-list-icon">
      <i class="fa fa-inbox"></i>
    </div>
    <div class="mad-list-text">
      <p>Inbox</p>
    </div>
  </li>
  <li>
    <div class="mad-list-icon">
      <i class="fa fa-send"></i>
    </div>
    <div class="mad-list-text">
      <p>Outbox</p>
    </div>
  </li>
</ul>

<ul class="mad-list">
  <li>
    <div class="mad-list-icon">
      <span class="mad-icon-24"></span>
    </div>
    <div class="mad-list-text border-bottom">
      <p>
        <b>24. October 2015</b><br>
        <b>Name Surname &mdash;</b>This is another line of text
      </p>
    </div>
  </li>
  <li>
    <div class="mad-list-icon">
      <span class="mad-icon-24"></span>
    </div>
    <div class="mad-list-text border-bottom">
      <p>
        <b>23. October 2015</b><br>
        <b>Foo Bar &mdash;</b>This is another line
      </p>
    </div>
  </li>
</ul>


<ul class="mad-list">
  <li>
    <div class="mad-list-icon">
      <span class="mad-icon-40" style="background-image:url(/image/1ZIkv.jpg?s=64&g=1)"></span>
    </div>
    <div class="mad-list-text">
      <p>Roko C.B.</p>
    </div>
    <div class="mad-list-icon-secundary">
      <span class="mad-icon-24"></span>
    </div>
  </li>
  <li>
    <div class="mad-list-icon">
      <span class="mad-icon-40"></span>
    </div>
    <div class="mad-list-text">
      <p>Foo Bar</p>
    </div>
    <div class="mad-list-icon-secundary">
      <span class="mad-icon-24"></span>
    </div>
  </li>
</ul>

<ul class="mad-list">
  <li>
    <div class="mad-list-icon">
      <span class="mad-icon-24"></span>
    </div>
    <div class="mad-list-text border-bottom">
      <p>Single-line item</p>
    </div>
    <div class="mad-list-icon-secundary">
      <i class="fa fa-star"></i>
    </div>
  </li>
  <li>
    <div class="mad-list-icon">
      <span class="mad-icon-24"></span>
    </div>
    <div class="mad-list-text border-bottom">
      <p>Single-line item</p>
    </div>
    <div class="mad-list-icon-secundary">
      <i class="fa fa-star"></i>
    </div>
  </li>
  <li>
    <div class="mad-list-icon">
      <span class="mad-icon-24"></span>
    </div>
    <div class="mad-list-text border-bottom">
      <p>Single-line item</p>
    </div>
    <div class="mad-list-icon-secundary">
      <i class="fa fa-star-o"></i>
    </div>
  </li>
</ul>

欢迎提出建议