移动端页面右侧字母布局

最新推荐文章于 2024-04-03 00:43:28 发布

LLL_LH

最新推荐文章于 2024-04-03 00:43:28 发布

阅读量1.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/82562096

版权

js 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

效果：

html:

<ul class="list">
    <li class="item">A</li>
    <li class="item">B</li>
    <li class="item">C</li>
    <li class="item">D</li>
    <li class="item">E</li>
    <li class="item">F</li>
    <li class="item">G</li>
  </ul>

css:

.list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 1.58rem;
    right: 0;
    bottom: 0;
    width: .4rem;
}
  .list  .item{
      line-height: .4rem;
      color: blue;
      text-align: center;
}

其中：position: absolute;top: 1.58rem;right: 0;bottom: 0;width: .4rem;写字母表在右侧定位，

display: flex;flex-direction: column;justify-content: center;使字母表在定位后的布局内垂直居中