CSS利用display:flex实现ul-li中tab垂直居中布局

最新推荐文章于 2024-08-14 14:33:26 发布

zhou_shadow

最新推荐文章于 2024-08-14 14:33:26 发布

阅读量6.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zhou_shadow/article/details/91492253

版权

本文介绍了如何使用CSS的display:flex属性来实现移动端echart表格下方按钮的垂直居中布局，以及类似tab的切换效果。通过示例代码展示了flex布局的运用，适合快速参考和复用。

摘要由CSDN通过智能技术生成

老规矩，先看看需求:要求在移动端实现echart表格下面添加点击按钮，实现类似与tab那种echart表格切换。按钮布局
类似于如下结果:
在这里插入图片描述
尝试过一些方法，发现可以利用display:flex、 flex-wrap: nowrap;实现类似效果
代码如下：

 <style>
        ul li{
   
            /*去除ul中list的“圆点”之类的样式*/
            list-style:none;
        }
        .stationList{
   
            width: 100%;
        }
        .stationList ul {
   
            /*display:flex 意思是弹性布局*/
            display: flex;
            /*flex-wrap:nowrap 意思是弹性布局-不换行,也就是子元素不换行*/
            /*flex-wrap: nowrap;*/
            flex-wrap: nowrap;
            /*设定ul所占的宽度百分比*/
            width:60%;
            /*让ul在.stationList中水平垂直居中*/
            margin:0px auto;
           /* padding: 0 0px;*/
        }
        .stationList ul li{
   
            height: 90px;
            /*设定li所占的宽度*/
            width:45%;
            /*内容垂直居中*/
            line-height: 90px;
            /*内容水平居中*/
            text-align: center;
            font-size: 20px;
            border: 1px solid red;
            box-sizing: border-box;
            margin: 5px 1%;
            color: #000;
            background:red;
            /*cursor：pointer意思是是计算机中把鼠标指针的形状弄成一只伸出食指的手，如下图*/
            cursor:pointer;
        }
    </style>
<body>
<div class="stationList" >
    <ul id="tab">
        <li id="tab1" class="selected" >上一页</li>
        <li id="tab2" >下一页</li>
    </ul>
</div>
</body>