Apple官网研究之使用Justify布局导航
2016-02-29 00:00
2366 查看
在实现文字两端对齐的时候,可以对文字所在的元素使用如下属性来达到需求
text-align: justify;
我们已经知道,使用浮动布局是一个次等选择,因为浮动布局会导致页面全局渲染2次而降低渲染效率,因此陆续出现了许多浮动布局的替换方案。比如新旧两种弹性盒模型,以及接下来我们需要分析到的内联块元素的两端对齐。
Apple官网也是使用了内联块元素的两端对齐。
<div class="wrap"> <div class="item">Javascript</div> <div class="item">Css</div> <div class="item">Angular</div> <div class="item">Gulp</div> <div class="item">Bootstrap</div> </div>
.wrap { max-width: 600px; background-color: orange; color: #fff; margin: 20px auto; text-align: justify; height: 44px; line-height: 44px; } .item { display: inline-block; } .wrap::after { display: inline-block; content: ''; width: 100%; line-height: 0; font-size: 0; }
想要使用justify达到预期效果,必须注意到以下一点
内联元素最后一排不会两端居中,而会左对齐。
因此,如果导航元素只有一排的话,text-align: justify
并不会生效, 所以我们在wrap子元素的最后添加一个after伪类,并将他的宽度设置为100%,那么最后一排就是这个after伪类了,效果就得意正常实现。
相关文章推荐
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- 为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- Caliburn Micro 框架 WP8使用研究(二)页面导航
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- CSS3弹性布局内容对齐(justify-content)属性使用详解
- CSS3弹性布局内容对齐(justify-content)属性使用具体解释
- ReactNative基础(六)使用react-navigation实现页面导航布局效果(TabNavigator)
- CSS3弹性布局内容对齐(justify-content)属性使用具体解释
- HTML5 - 经典的上中下三段式布局(并使用<nav>实现侧边导航链接)
- android 在布局中合理的使用tag标签的好处
- [置顶] CAS之客户端使用——基于CAS的单点登陆的研究(下)
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
- 百度站长工具之什么是官网保护?如何使用?
- 项目中使用的界面组件布局开发流程
- 关于使用了inline-block导致页面布局不受控制的一点说明
- 使用swing构建一个界面(包含flow ,Border,Grid,card ,scroll布局)
- 使用TabLayout实现底部Tab布局
- Bootstrap页面布局18 - BS导航路径以及分页器