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

   老规矩,先看看需求:要求在移动端实现echart表格下面添加点击按钮,实现类似与tab那种echart表格切换。按钮布局
类似于如下结果:
CSS利用display:flex实现ul-li中tab垂直居中布局_第1张图片
尝试过一些方法,发现可以利用display:flex、 flex-wrap: nowrap;实现类似效果
代码如下:

 

"stationList" >
    "tab">
  • "tab1" class="selected" >上一页
  • "tab2" >下一页

效果
CSS利用display:flex实现ul-li中tab垂直居中布局_第2张图片
类似的采用div的布局
代码如下:

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

效果:
CSS利用display:flex实现ul-li中tab垂直居中布局_第3张图片
虽然是一个简单的需求,可是新人还是折腾了许久,贴在这里,下次直接使用。
另外还有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;
}     

<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)