列表

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

无序列表
无序列表
无序列表

有序列表
有序列表
有序列表

1有序列表
2有序列表
3有序列表

HTML SCSS CSS

<ul class="hui-list hui-list-disc">
  <li class="hui-list-item">无序列表</li>
  <li class="hui-list-item">无序列表</li>
  <li class="hui-list-item">无序列表</li>
</ul>
<ol class="hui-list hui-list-decimal">
  <li class="hui-list-item">有序列表</li>
  <li class="hui-list-item">有序列表</li>
  <li class="hui-list-item">有序列表</li>
</ol>
<ol class="hui-list hui-list-top">
  <li class="hui-list-item"><span class="num">1</span>有序列表</li>
  <li class="hui-list-item"><span class="num">2</span>有序列表</li>
  <li class="hui-list-item"><span class="num">3</span>有序列表</li>
</ol>

.hui-list {
  .hui-list-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
    font-size: 14px;
    /*禁止换行*/
    .date {
      font-size: 12px;
      font-family: Arial;
      color: #999;
    }
  }
  &.hui-list-disc {
    list-style: inside;
    list-style-type: disc;
  }
  &.hui-list-decimal {
    list-style: inside;
    list-style-type: decimal;
  }

  /*排行榜*/
  &.hui-list-top {
    .hui-list-item {
      padding-left: 30px;
      text-overflow: ellipsis;
      vertical-align: bottom;
      white-space: nowrap;
      height: 20px;
      list-style: 20px;
      .num {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        background-color: #5a98de;
        text-align: center;
      }
    }
  }
}

/*横向手机 竖向平板*/
@media (max-width: 767px) {
  .hui-list {
    .hui-list-item {
      font-size: 18px;
      padding: 11px 15px;
      border-bottom: 1px solid #eee;
      > a {
        display: block;
        margin: -11px -15px
      }
      .date {
        display: none
      }
      .hui-iconfont {
        background-size: 9px auto;
        margin-top: -7px;
        position: absolute;
        right: 15px;
        top: 50%;
      }
    }
  }
  .night .hui-list {
    >.hui-list-item {
      border-bottom: 1px solid #1F1F1F;
    }
  }
}

.hui-list .hui-list-item {
  position: relative;
  overflow: hidden;
  margin-bottom: 5px;
  font-size: 14px;
  /*禁止换行*/
}
.hui-list .hui-list-item .date {
  font-size: 12px;
  font-family: Arial;
  color: #999;
}
.hui-list.hui-list-disc {
  list-style: inside;
  list-style-type: disc;
}
.hui-list.hui-list-decimal {
  list-style: inside;
  list-style-type: decimal;
}
.hui-list.hui-list-top .hui-list-item {
  padding-left: 30px;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
  height: 20px;
  list-style: 20px;
}
.hui-list.hui-list-top .hui-list-item .num {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #fff;
  background-color: #5a98de;
  text-align: center;
}

/*横向手机 竖向平板*/
@media (max-width: 767px) {
  .hui-list .hui-list-item {
    font-size: 18px;
    padding: 11px 15px;
    border-bottom: 1px solid #eee;
  }
  .hui-list .hui-list-item > a {
    display: block;
    margin: -11px -15px;
  }
  .hui-list .hui-list-item .date {
    display: none;
  }
  .hui-list .hui-list-item .hui-iconfont {
    background-size: 9px auto;
    margin-top: -7px;
    position: absolute;
    right: 15px;
    top: 50%;
  }

  .night .hui-list > .hui-list-item {
    border-bottom: 1px solid #1F1F1F;
  }
}