CSS3 如何实现标签宽度按权等分
来源:互联网 发布:花生壳免费域名使用 编辑:程序博客网 时间:2024/05/19 19:56
类似于导航栏类的标签通常会涉及到宽度等分的问题,一些比较好等分的类似四个五个六个这样的按百分比为单位就可以的,但是遇到三等分七等分这种的用百分比就很难等分了,这里介绍css3的一个flex的属性,父级元素用display:flex;布局,子集元素用flex:1;均分父级元素,这样就可以达到完美的等分效果了,具体代码如下:
html代码:
<ul id="father"><li class="children">第一个</li><li class="children">第二个</li><li class="children">第三个</li></ul>
css代码:
#father{ display:flex; width:100%; height:10rem;}.children{ flex:1; text-align:center;}
这里要注意的是flex是等分父级元素的宽度,要实现等分,首先得保证这些标签元素在同一父级标签元素下面,当然,flex后面的值不一定非要是1,若是要让不同的子标签占不同的比重,填上相应的权值即可。
0 0
- CSS3 如何实现标签宽度按权等分
- Css3方法的等分
- 纯css3饼图五等分
- 如何使用CSS3实现一个3D商品标签
- iOS-用两个button等分屏幕宽度的两种实现方式
- css3实现百分比宽度减固定宽度展现
- 如何给 legend 标签设定宽度
- 等分
- Auto Layout— 实现等分
- unity实现N等分圆
- python实现列表的等分
- CSS3 DIV自适应宽度、水平居中的实现方法
- 纯CSS3实现的标签效果
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- css3:计算宽度
- css3--网页横向四等分(display:box)
- CSS中如何把Span标签设置为固定宽度
- 行级标签span a label 等 如何设置宽度
- 生成"登录验证码"的方法步骤
- 修饰类成员函数的几个关键字:inline, const, explicit, static, virtual
- Android-MessageQueue类
- 类与类之间的关系图(Class Diagram,UML图)
- mysql中You can't specify target table for update in FROM clause错误
- CSS3 如何实现标签宽度按权等分
- 浅谈StrictMode
- Linux面试必备
- Ecelipse用GIT中从服务器上更新代码
- 高效CSS属性简写总结
- 每日积累(20161220-day-20)(ubuntu 远程登录ssh安装使用 创建ubuntu用户)
- 使用curl进行模拟登录
- collectionview写的新手引导
- HTTPS证书生成原理和部署细节