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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【网站项目】新冠疫情隔离人员信息管理系统(有源码)

🙊作者简介:多年一线开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板,帮助书写开题报告。作者完整代码目录供你选择: 《Springboot网站项目…

Hadoop3.x学习笔记

文章目录 一、Hadoop入门1、Hadoop概述1.1 简介1.2 hadoop优势1.3 hadoop组成1.4 大数据技术生态体系 2、环境准备(重点)2.1 模板机配置2.2 模板创建 3、本地运行模式&#xff08;官方WordCount&#xff09;4、Hadoop集群搭建(&#x1f31f;重点)4.1 环境准备(集群分发脚本xsyn…

[GXYCTF2019]BabyUpload1

尝试各种文件&#xff0c;黑名单过滤后缀ph&#xff0c;content-type限制image/jpeg 内容过滤<?&#xff0c;木马改用<script languagephp>eval($_POST[cmdjs]);</script> 上传.htaccess将上传的文件当作php解析 蚁剑连接得到flag

水波浪标题

上图效果要先复制第13次修改的备忘录&#xff0c;再另外保存下面的代码&#xff1a; <!DOCTYPE html> <html lang"zh"> <a class"a-href a-h">水波浪标题</a> <style>.h1-div {/* 隐藏 */display: none;}h1 {display: inli…

[docker] Docker镜像的创建以及Dockerfile的使用

一、Dokcer镜像的创建 创建镜像有三种方法&#xff0c;分别为基于已有镜像创建、基于本地模板创建以及基于Dockerfile创建。 1.1 基于现有镜像创建 &#xff08;1&#xff09;首先启动一个镜像&#xff0c;在容器里做修改docker run -it --name web centos:7 /bin/bash …

代码随想录算法训练营第十四天|二叉树基础-二叉树迭代-二叉树

文章目录 二叉树基础二叉树种类满二叉树完全二叉树二叉搜索树平衡二叉搜索树 二叉树的存储方式链式存储顺序存储 二叉树的遍历方式二叉树的定义 二叉树的递归遍历144.二叉树的前序遍历代码&#xff1a; 145.二叉树的后序遍历代码&#xff1a; 94. 二叉树的中序遍历代码 二叉树的…

LEETCODE 164破解闯关密码

class Solution { public:string crackPassword(vector<int>& password) { //在比较两个字符串大小时&#xff0c;其实是按照字典序逐个比较它们的字符。首先比较两个字符串的第一个字符&#xff0c;如果它们不相等&#xff0c;则可以根据它们的 ASCII 码大小确定它们…

SpringBoot+MyBatis使用pagehelper分页插件及其注意事项(含解决分页不生效问题)

1 前言 近期在做项目的时候&#xff0c;遇到了一个问题&#xff1a;在使用MyBatis的分页插件&#xff08;pagehelper&#xff09;时&#xff0c;发现其分页不生效&#xff0c;找了许多方法才得以解决&#xff0c;故写下这篇文章记录一下&#xff0c;帮助跟我遇到同样问题的同学…

Python lambda函数

Python是一种功能强大的编程语言&#xff0c;具有许多特性和工具&#xff0c;其中之一是Lambda函数。Lambda函数是一种轻量级的匿名函数&#xff0c;可以快速定义和使用小型函数&#xff0c;而无需显式命名。本文将深入探讨Python中的Lambda函数&#xff0c;包括其语法、用途、…

聚醚醚酮(Polyether Ether Ketone)PEEK主要作用是什么?

聚醚醚酮&#xff08;Polyether Ether Ketone&#xff0c;PEEK&#xff09;在工程和高性能应用中具有广泛的应用&#xff0c;主要作用包括&#xff1a; 1.结构材料&#xff1a; PEEK因其优异的机械性能&#xff0c;包括高强度、高硬度和耐磨性&#xff0c;常被用作结构件的制造…

node.js安装配置详细教程(附图-贼详细)

一&#xff1a;下载 Node.js官网下载地址&#xff1a;Node.js — Download 选择自己需要的版本我用的Windows ps:如果想下载指定版本&#xff0c;点下面这个就可以选择想要的版本 二&#xff1a;安装 1.下载完成后&#xff0c;双击安装包开始安装 2.安装过程&#xff1a;一步…

qt学习:tcp区分保存多个客户端

在前面文掌的tcp客服端服务端进行更改 qt学习&#xff1a;Network网络类tcp客户端tcp服务端-CSDN博客https://blog.csdn.net/weixin_59669309/article/details/135842933?spm1001.2014.3001.5501前面的服务端每次有新的客户端连接&#xff0c;就会覆盖掉原来的指针&#xff0…

堆的概念,性质及其实现

1.堆的概念及结构 如果有一个关键码的集合K { &#xff0c; &#xff0c; &#xff0c;…&#xff0c; }&#xff0c;把它的所有元素按完全二叉树的顺序存储方式存储在一个一维数组中&#xff0c;并满足&#xff1a; < 且 < ( > 且 > ) i 0&#xff0c;1&#x…

Vue2 - vue-virtual-scroller 长列表优化原理

目录 1&#xff0c;效果展示2&#xff0c;原理2.1&#xff0c;滚动条的处理2.2&#xff0c;展示内容处理 3&#xff0c;实现 vue-virtual-scroller 1&#xff0c;效果展示 1w 条数据无压力&#xff0c;看下初始渲染时间 Rendering 对比&#xff1a; 2&#xff0c;原理 目标&a…

多维时序 | Matlab实现DBO-BiLSTM蜣螂算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | Matlab实现DBO-BiLSTM蜣螂算法优化双向长短期记忆神经网络多变量时间序列预测 目录 多维时序 | Matlab实现DBO-BiLSTM蜣螂算法优化双向长短期记忆神经网络多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现DBO-BiLSTM多变量时间序…

ActiveMQ|01-ClassicArtemis功能介绍

接上篇-MQ消息队列主流消息服务规范及代表产品&#xff0c;ActiveMQ就是基于JMS消息服务规范的消息中间件组件&#xff0c;主要应用在分布式系统架构中&#xff0c;帮助构建高可用、 高性能、可伸缩的企业级面向消息服务的系统 本文速览&#xff1a; JMS对象模型ActiveMQ的功…

关于axios给后端发送数据的问题

这里需要用的插件&#xff1a;qs.js&#xff0c;是前端给后端发送的数组&#xff0c;需要序列化所以要用到这个插件&#xff0c;这里就提取连接在这里&#xff0c;需要的自提&#xff0c;需要导如进来&#xff0c;别忘记了 链接&#xff1a;https://pan.baidu.com/s/1qyD8v9wfd…

极简云验证商业版已经开源源码

极简云商业版已经开源 解绑卡密 查询卡密 总体来说还是很完善的 对接例子网盘里有 用户注册需要配置邮箱 上网页 QQ 邮箱标准版开启 SMTP 然后生成授权码后台发信邮箱里填就对了 实在不会配置邮箱的 可以下载网盘里的reg.php 把 reg.php 上传源码里的 user 目录 之后注册就不需…

论文阅读《thanking frequency fordeepfake detection》

这篇论文从频域的角度出发&#xff0c;提出了频域感知模型用于deepfake检测的模型 整体架构图&#xff1a; 1.FAD&#xff1a; 频域感知分解&#xff0c;其实就是利用DCT变换&#xff0c;将空间域转换为频域&#xff0c;变换后的图像低频信息在左上角&#xff0c;高频信息在右…

TCP 三次握手以及滑动窗口

TCP 三次握手 简介&#xff1a; TCP 是一种面向连接的单播协议&#xff0c;在发送数据前&#xff0c;通信双方必须在彼此间建立一条连接。所谓的 “ 连接” &#xff0c;其实是客户端和服务器的内存里保存的一份关于对方的信息&#xff0c;如 IP 地址、端口号等。 TCP 可以…