纯css实现多标签浮动居中(任意个数)
在做的一个网页上有一块要用浮动标签,具体就是网页底部有未知数量,未知尺寸的元素要水平居中,有点类似于分页器。
首先,我们先新建一个容器con,就是标签的爸爸,用来控制标签在页面的位置,
.father{position:absolute;width:100%;height:30px;bottom:0;}
接下来分析子元素的属性,因为元素的尺寸是未知的(主要是宽度),所以不能给固定宽度,标签的个数也是未知的,有可能是3个,也有可能是13个,
所以也不能给绝对定位,不然还得给每个标签定位,所以只能用relative了。
.children{position:relative;}
注意这个时候不能添上float属性,不然无法居中,加上display: inline-block;能让元素自动根据宽度排成一列,并且居中。
-->.children{position:relative;display: inline-block;}就是这么easy,效果是下面这个样子滴

纯css实现多标签浮动居中(任意个数)的更多相关文章
- CSS 轻松搞定标签(元素)居中问题
在CSS里,标签位置居中一直是困扰Web前端的难题.在本文中,我对这类问题进行了探究和给出了几点建议,供读者参考. 1 行内标签 1.1 水平居中 在父级标签中使用 text-align: cente ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 纯CSS实现一个微信logo,需要几个标签?
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...
- marquee标签跑马灯连续无空白播放效果 纯CSS(chrome opera有效)
marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 纯CSS打造银色MacBook Air(完整版)
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
- css块级标签,行内标签,行内块标签的转换(2)
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 使用纯CSS方案,解决垂直居中
CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...
随机推荐
- 分离你的spring配置文件,让结构更清晰
前言 接着上一篇的,这次框架的改变也成功分离了spring的配置文件. 以前,spring的配置文件从一开始的一点,到后面的逐渐变多,慢慢的,在一个spring的配置文件中就包含了好几块不同的bean ...
- OutOfMemoryError内存不足
java.lang.OutOfMemoryError内存不足错误.当可用内存不足以让Java虚拟机分配给一个对象时抛出该错误. 造成此错误的原因有一下几个: 1.内存中加载的数据量过于庞大,如一次从数 ...
- Java线程详解----借鉴
Java线程:概念与原理 一.操作系统中线程和进程的概念 现在的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一个进程 ...
- js的break语句,continue语句,return语句
js的break语句,continue语句,return语句. 用的时候很容易混淆,有过一次泪奔的经历. break语句 break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch ...
- SQLite中使用CTE巧解多级分类的级联查询
在最近的项目中使用ActiveReports报表设计器设计一个报表模板时,遇到一个多级分类的难题:需要将某个部门所有销售及下属部门的销售金额汇总,因为下属级别的层次不确定,所以靠拼接子查询的方式显然是 ...
- JS理解之闭包
首先,闭包是什么?这个问题,百度上一大堆,然后我也是,现在学的有点累,来回顾一下吧算是,懂的自动略过,小弟不才,道行入不了你们法眼. 我认为的闭包是,就是取到,不是在自己作用域内或者按照js的规则,娶 ...
- 一行code实现ADO.NET查询结果映射至实体对象。
AutoMapper是一个.NET的对象映射工具. 主要用途 领域对象与DTO之间的转换.数据库查询结果映射至实体对象. 这次我们说说 数据库查询结果映射至实体对象. 先贴一段代码: public S ...
- extjs4 前台导出grid数据 生成excel,数据量大后台无法接收到数据
最近做的一个web项目使用的是extsj4 框架,需要一个导出excel功能,通过extjs4 自带的导出方法实现.在前台生成excel的代码,form提交传递到后台输出.前台grid数据超过1000 ...
- Javascript中Array(数组)对象常用的几个方法
Javascript中Array数组的几个常用方法 pop() --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice() --按照下 ...
- Angular2.js——表单(下)
这部分是接表单上部分的内容,主要内容有: 1.添加自定义的CSS来提供视觉反馈: 2.显示和隐藏有效性验证的错误信息: 3.使用ngSubmit处理表单提交: 4.禁用表单提交按钮. 添加自定义的CS ...