css列表换行小技巧

列表一行容不下自动换行 追加内容居右居下!

实现思路1、追加伪类占用位置迫使内容换行，后续内容居右实现效果

html

  <div class="content">
    <ul class="lst">
      <li v-for="(itm,inx) in list"
          :key="inx">
        <a>{{itm.title}}</a><span>{{itm.createTime}}</span></li>
    </ul>
  </div>

css：

.lst {
  list-style: none;
  padding-left: 0;
  text-align: left;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  line-height: 20px;
  li {
    position: relative;
    & > a {
      color: #333;
      &::after {
        content: "";
        width: 90px;
        display: inline-block;
      }
    }
    & > span {
      position: absolute;
      color: #3064bb;
      right: 10px;
      bottom: 0;
    }
  }
}