css列表换行小技巧

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

效果图

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

html

  

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;
    }
  }
}

你可能感兴趣的:(css列表换行小技巧)