web前端之不一样的居中方式、解决tabBar选项卡居中问题、css支持嵌套、auto

MENU

  • 前言
  • html
  • style
  • 效果


前言

这里不能使用justify-content: center;,因为在小屏幕上,这种方式无法显示最前面的两个tabBar。


html

<div id="box" class="d_f o_a mt_50 mb_50 ml_20 mr_20"><div class="ws_n">tabBar 1</div><div class="ws_n ml_20">tabBar 2</div><div class="ws_n ml_20">tabBar 3</div><div class="ws_n ml_20">tabBar 4</div><div class="ws_n ml_20">tabBar 5</div><div class="ws_n ml_20">tabBar 6</div><div class="ws_n ml_20">tabBar 7</div><div class="ws_n ml_20">tabBar 8</div><div class="ws_n ml_20">tabBar 9</div>
</div>

style

#box {& :first-child {margin-left: auto;}& :last-child {margin-right: auto;}
}

效果

tabBarCenter1


tabBarCenter2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647009.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】如何通过DDL去创建和修改员工信息表

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-fmKISDBsFq74ab2Z {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

【vue】Vue2和Vue3中的代码逻辑复用对比(mixins、自定义hook):

文章目录 一、前言&#xff1a;二、mixins&#xff1a;【1】mixins是什么&#xff1f;【2】mixins如何使用&#xff1f;【3】mixins的一些特性&#xff1a;【4】mixins的缺点&#xff1a; 三、hook&#xff1a;【1】Vue3.x中的自定义hook函数是什么&#xff1f;【2】mixins和Co…

4.【SpringBoot3】文章管理接口开发

序言 在文章管理模块&#xff0c;有以下接口需要开发&#xff1a; 新增文章文章列表&#xff08;条件分页&#xff09;获取文章详情更新文章删除文章 数据库表字段和实体类属性&#xff1a; 1. 新增文章 需求分析 当用户点击左侧菜单中的“文章管理”后&#xff0c;页面主…

SpringBoot_基础

学习目标 基于SpringBoot框架的程序开发步骤 熟练使用SpringBoot配置信息修改服务器配置 基于SpringBoot的完成SSM整合项目开发 一、SpringBoot简介 1. 入门案例 问题导入 SpringMVC的HelloWord程序大家还记得吗&#xff1f; SpringBoot是由Pivotal团队提供的全新框架&…

java数据结构与算法刷题-----LeetCode697. 数组的度

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 方法一&#xff1a;hash表 此方法是工作中时间可以使用的&#xff0c;因为…

阅读go语言工具源码系列之gopacket(谷歌出品)----第一集 DLL的go封装

gopacket项目是google出品的golang第三方库&#xff0c;项目源码地址google/gopacket: Provides packet processing capabilities for Go (github.com) gopacket核心是对经典的抓包工具libpcap(linux平台)和npcap(windows平台)的go封装&#xff0c;提供了更方便的go语言操作接…

嵌入式linux学习之系统烧录

1.所需文件 1. 开发板为正点原子stm32mp157,文件可按照linux驱动教程编译&#xff0c;也可在正点原子文档->08、系统镜像\02、出厂系统镜像中找到&#xff1a; 2.烧录 1.拨码开关为000(usb启动)&#xff0c;otg接口接入虚拟机&#xff0c;打开stm32cubeProgrammer: 2.页面…

AP5101C 高压线性 LED恒流驱动器 DFN2*2 LED灯汽车雾灯转向灯

产品描述 AP5101C 是一款高压线性 LED 恒流芯片 &#xff0c; 简单 、 内置功率管 &#xff0c; 适用于6- 100V 输入的高精度降压 LED 恒流驱动芯片。电流2.0A。AP5101C 可实现内置MOS 做 2.0A,外置 MOS 可做 3.0A 的。AP5101C 内置温度保护功能 &#xff0c;温度保护点为 130 …

CQ 社区版 2.8.0 | 支持TiDB、StarRocks,新增列过滤算法、导出模式设置等

Hello&#xff0c;CloudQuery 社区版 2.8.0 已发布&#xff0c;本文将带大家详细解析本次更新的功能~&#xff08;完整的讲解视频可点击 &#x1f449;&#x1f3fb; CloudQuery 社区版2.8.0 功能讲解演示 本期亮点更新 新增支持数据源 TiDB、StarRocks数据保护新增列过滤脱敏…

cmd命令行输出的内容复制粘贴到文本中

cmd程序执行完后按任意键进行结束&#xff0c;无法直接复制命令行里输出的内容&#xff0c;如下图&#xff0c;在Windows系统里按ctrlC&#xff0c;然后该窗口就关闭了&#xff0c;内容也没有复制成功到粘贴板。 解决办法如下&#xff1a; 在上方打开设置 然后在“交互”里打…

JDBC 总结

一、JDBC概述 JDBC&#xff08;Java DataBase Connectivity&#xff09;java数据库连接是一种用于执行SQL语句的Java API&#xff0c;可以为多种关系型数据库提供统一访问&#xff0c; 它由一组用Java语言编写的类和接口组成。有了JDBC,java开发人员只需要编写一次程序,就可以…

Linux系统中虚拟文件系统原理与方法

在 Unix 的世界里&#xff0c;有句很经典的话&#xff1a;一切对象皆是文件。这句话的意思是说&#xff0c;可以将 Unix 操作系统中所有的对象都当成文件&#xff0c;然后使用操作文件的接口来操作它们。Linux 作为一个类 Unix 操作系统&#xff0c;也努力实现这个目标。 虚拟文…

E4 基于Mysql的游标定义和应用

一、实验目的: 熟练使用MySQL游标的定义和应用。 二、实验要求: 1、基本硬件配置:英特尔Pentium III 以上,大于4G内存&#xff1b; 2、软件要求:Mysql&#xff1b; 3、时间:1小时&#xff1b; 4、撰写实验报告并按时提交。 三、实验内容: 问题1&#xff1a;请写一个存储…

MTP与管理壳(AAS)有异曲同工之妙

在过去的几年中&#xff0c;流程工业中的不同部门&#xff08;例如制药、精细化学品以及食品和饮料部门&#xff09;遇到了一系列共同且可比较的新兴挑战。这些挑战包括&#xff1a; 新产品的需求迅速接连不断&#xff0c;更快交货和更低价格的压力&#xff0c;更多定制产品&a…

【Java并发】聊聊Future如何提升商品查询速度

java中可以通过new thread、实现runnable来进行实现线程。但是唯一的缺点是没有返回值、以及抛出异常&#xff0c;而callable就可以解决这个问题。通过配合使用futuretask来进行使用。 并且Future提供了对任务的操作&#xff0c;取消&#xff0c;查询是否完成&#xff0c;获取结…

代理模式-C#实现

该实例基于WPF实现&#xff0c;直接上代码&#xff0c;下面为三层架构的代码。 目录 一 Model 二 View 三 ViewModel 一 Model using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 设计模式练…

【Linux】进程间通信——信号量

让大家久等啦&#xff0c;本期我们来讲讲Linux系统中的信号量 目录 一、引入 二、认识信号量 2.1 信号量的概念 2.2 信号量的内核结构 三、关于信号量的接口 3.1 semget 3.2 ipcs -s 3.3 ipcrm -s 3.4 semctl 3.5 semop 四、理解IPC 一、引入 在开始之前我们先来认…

2023.1.21 关于 Redis 主从复制详解

目录 引言 单点问题 分布式系统 主从模式 配置 Redis 主从结构 断开主从关系 切换主从关系 补充知识点一 只读 网络延迟 拓扑结构 一主一从 一主多从 树形主从结构 主从复制的基本流程 数据同步 replicationid offset pzync 运行流程 具体流程 补充知识点二…

C. Doremy‘s City Construction(二分图问题)

思路&#xff1a;把集合划分成两部分,一部分中每个数都比另一部分小,这两部分连成一个完全二分图,这种情况是最优的,还需要特判所有数都相等的情况. 代码&#xff1a; void solve(){int n;cin >> n;vector<int>a(n 1);for(int i 1;i < n;i )cin >> a[…

如何使用iPhone或iPad上的二维码共享Wi-Fi密码?这里有详细步骤

你有没有想过在不泄露网络密码的情况下与客人共享你的家庭或工作Wi-Fi?你肯定不是第一个这样想的人,我们很高兴地通知你,多亏了以下这个的变通方法,你现在可以使用iPhone或iPad做到这一点。 通常,如果你想让其他人访问网络,你需要共享你的Wi-Fi密码。苹果通过引入与任何…