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

最新推荐文章于 2024-07-17 10:45:00 发布
最新推荐文章于 2024-07-17 10:45:00 发布
阅读量6.2k 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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>

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


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  zhou_shadow
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
ul里不能直接嵌套div(在ie7以前版本)

				
			

			

				

					12-08
				

			

		

		

			
				
在ul下，直接嵌套div，在ie7以前版本，会出现的状况是：div会被离它最近的li包裹住。 请看dome 
复制代码代码如下: <ul class=”clearfix”> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <div class=”add”> 这一块在ie7及之前版本会被加载到文本为5的li里。 </div> </ul> <style type=”text/css”> .clearfix{ display:inline-block; width:100%; } .clearfix li{ float:left; pa

			
		

	



                

              
                



	

		

			

				
					
ul中li内容垂直居中和水平居中的方法

				
			

			

				

					qq_41737172的博客
				

				

					08-06
					
					1万+
					
				

			

		

		

			
				
1、li内容垂直居中
flex-direction属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下：
HTML部分：
　　
　　
　　aa
　　bb
　　cc
　　dd
　　
　　
CSS部分：
　　<styletype=“text/css”>
.box{

			
		

	



                


  
              

                


	

		

			

				
					
css盒子水平垂直居中(4种)

					
最新发布

				
			

			

				

					2301_76917834的博客
				

				

					07-17
					
					858
					
				

			

		

		

			
				
【代码】css盒子水平垂直居中(4种)

			
		

	





	

		

			

				
					
超简洁方式 : ul＞li结构+flex布局实现骰子效果

				
			

			

				

					i-cat的博客
				

				

					01-30
					
					650
					
				

			

		

		

			
				
如何通过ul>li结构+flex布局实现骰子效果?

			
		

	



		

			
		



	

		

			

				
					
css 居中问题的总结

				
			

			

				

					qq_43889848的博客
				

				

					05-15
					
					2252
					
				

			

		

		

			
				
1.css让浮动的盒子水平居中
解决方法：


给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto;


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{
			padding: 0;
			margin:

			
		

	





	

		

			

				
					
【Html】23 - flex弹性布局

				
			

			

				

					郑SaScha的博客
				

				

					06-28
					
					210
					
				

			

		

		

			
				
flex（flexible box）弹性盒子

			
		

	





	

		

			

				
					
详解CSS中的display:flex||inline-flex属性|56375.pdf

				
			

			

				

					12-12
				

			

		

		

			
				
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 ...

			
		

	





	

		

			

				
					
实现div垂直居中的display:table-cell方法示例介绍

				
			

			

				

					09-25
				

			

		

		

			
				
使用这些属性，我们可以利用CSS表格布局的特性来实现垂直居中。  在示例代码中，我们看到使用了一个外部容器div#wrap，设置其display属性为table，并为该容器定义宽度和高度。然后，内部容器div#subwrap的display...

			
		

	





	

		

			

				
					
利用CSS3的flexbox实现水平垂直居中与三列等高布局

				
			

			

				

					01-19
				

			

		

		

			
				
因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解，所以会对flexbox的概念做一个简单的介绍，以为后面的实例做一个铺垫。本人一直认为，不管学习任何知识，对于概念的理解都十分...

			
		

	





	

		

			

				
					
浅谈CSS3中display属性的Flex布局的方法

				
			

			

				

					09-24
				

			

		

		

			
				
本文将深入探讨CSS3中`display`属性的`flex`布局方法，这是一种极具灵活性的页面布局技术，广泛应用于现代网页和应用开发，包括微信小程序的设计。`Flex布局`，全称`Flexible Box`，旨在为盒状模型提供更为便捷、...

			
		

	





	

		

			

				
					
关于CSS中的display:table-cell使用技巧的几种应用

				
			

			

				

					01-19
				

			

		

		

			
				
例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。...

			
		

	





	

		

			

				
					
ul 中 li 内容垂直居中和水平居中的方法

					
热门推荐

				
			

			

				

					yijiupingfan0914的博客
				

				

					08-09
					
					2万+
					
				

			

		

		

			
				
1、li内容垂直居中

flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下：

HTML部分：


			1

			2

	...

			
		

	





	

		

			

				
					
【CSS】Flex布局

				
			

			

				

					吴纯玲的博客
				

				

					06-19
					
					291
					
				

			

		

		

			
				
Flex布局有两个概念，容器（父元素）与项目（子元素）

如下,ul就是容器/父元素，li就是项目/子元素。要使用flex布局，最重要一点，要先将容器的display属性置为flex。当父元素是行内元素时，则用inline-flex


&lt;ul&gt;
 &lt;li&gt;1&lt;/li&gt;
 &lt;li&gt;2&lt;/li&gt;
 &lt;li&gt;3&lt;/li&gt

			
		

	





	

		

			

				
					
[ flex ] -- 父盒子ul为flex布局时宽度不够，子盒子li无法被撑开的问题(li的宽度被压缩)

				
			

			

				

					tuzi007a的博客
				

				

					09-14
					
					2611
					
				

			

		

		

			
				
[ flex ] -- 父盒子ul为flex布局时宽度不够，子盒子li无法被撑开的问题(li的宽度被压缩)

			
		

	





	

		

			

				
					
CSS day12 移动端布局练习

				
			

			

				

					qq_34620296的博客
				

				

					09-13
					
					782
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-U...

			
		

	





	

		

			

				
					
CSS元素水平垂直居中

				
			

			

				

					东方初白的博客
				

				

					08-23
					
					250
					
				

			

		

		

			
				
目录CSS元素水平垂直居中方案一：使用定位1、利用margin:auto2、利用百分比3、利用位移translate方案二：使用弹性盒flex
CSS元素水平垂直居中
方案一：使用定位

定位有三种方法可以实现子元素在父元素中的水平垂直居中
利用子绝父相（子元素设置绝对定位，父元素设置相对定位）的原理

1、利用margin:auto
这种方法的原理就是给子元素的top，bottom，left，right属性都设置为0，此时子元素就无法正常在父元素中定位，然后给子元素设置一个margin上下左右都是auto

			
		

	





	

		

			

				
					
Flex  弹性盒子布局

				
			

			

				

					weixin_43694083的博客
				

				

					04-01
					
					696
					
				

			

		

		

			
				
Hi，这是我的第一篇博客。最近或是以前经常会使用到盒子弹性布局flex，于是就想写一篇总结，虽然网上已经有很多这方面的文章。

			
		

	





	

		

			

				
					
深入理解 CSS3 弹性盒布局模型

				
			

			

				

					weixin_34194379的博客
				

				

					07-03
					
					449
					
				

			

		

		

			
				
Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置， 以达到最佳的显示效果。这也使得布局的逻辑变得更加复杂。本文介绍的是 CSS3 规范中引入的新布局模型：弹性盒模型（flex ...

			
		

	





	

		

			

				
					
弹性布局的一个小实例

				
			

			

				

					Handsome_fan的博客
				

				

					04-11
					
					3171
					
				

			

		

		

			
				
Flex布局也叫弹性布局。



  
  Document
  
  *{
  	margin: 0;
  	padding: 0;
  }   
  li{
  	width: 50px;
  	height: 50px;
  	background: #18A15E;
  	display: inline-block;
  }

  

  
  
  	
  		
  		
  		
 

			
		

	





	

		

			

				
					
display: flex;flex-direction: column;align-items: center;

				
			

			

				

					04-27
				

			

		

		

			
				
这个样式可以用于创建垂直居中的布局，例如在一个容器中垂直居中显示一组元素。  范例： ```html  .container {  display: flex;  flex-direction: column;  align-items: center;  height: 200px;  border: 1px ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值