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

老规矩，先看看需求:要求在移动端实现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>

效果
在这里插入图片描述
类似的采用div的布局
代码如下:

  <style>
        *{
            margin:0px;
            padding:0px;
        }
        .main{
            width:100%;
            background-color: skyblue;
        }
        .box{
            display: flex;
            background-color:blue;
            flex-wrap: nowrap;
            width:20%;
            margin:0px auto;
        }
        .item{
            height:100px;
            width:50%;
            line-height:100px;
            text-align:center;
            background-color:orangered;
            margin:0.8%;
        }
    </style>

<body>
<div class="main">
<div class="box">
    <div class="item">aaaa
    </div>
    <div class="item">bbbb
    </div>
</div>
</div>

效果:
在这里插入图片描述
虽然是一个简单的需求，可是新人还是折腾了许久，贴在这里，下次直接使用。
另外还有tab的切换，也贴在这里，以备不时之需。

.selected{
	background-color:#00A8E6;
	color:#FFFFFF;
}     
.stationList {
	width: 100%;
}
.stationList ul{
   width:100%;
}
ul li{
   list-style:none;
}
.stationList ul {
	display: flex;
	flex-wrap: wrap;
	padding: 40px;
}
.stationList ul li{
 	width: 31%;
	text-align: center;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	border: 1px solid #e7e7e7;
	box-sizing: border-box;
	margin: 5px 1%;
	color:#000000;
	background:#e7e7e7;
	cursor:pointer;
  }
  .stationList ul li.selected {
	background: #00A8E6;
	color: #FFFFFF;
	border: 1px solid #00A8E6;
}     
</style>

<body>
<div id="container">
	<div id="map1"  style="width:100%;height:300px;"></div>
	<div id="map1_1" style="width:100%;height:300px;display:none"></div>
</div>
<div class="stationList" style="width: 100%;text-align: center;">
	<ul id="tab" style="width:45%;margin:0px auto">
		 <li id="tab1" class="selected" style="width:48%">上一页</li>
		 <li id="tab2" style="width:48%">下一页</li>
	</ul>
</div>
</body>

var currentIndex = 0;
var $contents = $('#container>div')
$("#tab>li").click(function(){
$contents[currentIndex].style.display ="none";
var index =$(this).index();
$contents[index].style.display = "block";
$(this).addClass("selected").siblings().removeClass("selected");
currentIndex = index;
})

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

猜你喜欢