CSS两端对齐
前面的话
两端对齐在导航Nav的制作中非常常用。本文将详细介绍CSS两端对齐的4种实现方式
flex
弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端对齐。可以使用主轴对齐justify-content
的两端对齐属性space-between
justify-content: space-between;
如果要考虑flex三个版本的兼容,则使用如下代码
[注意]IE9-浏览器不支持
.justify-content_flex-justify{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;}
.in{background-color: lightblue;padding: 0 10px;}
.display_flex{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.display_flex > *{display: block;}
.justify-content_flex-justify{-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;}
</style>
<ul class="list display_flex justify-content_flex-justify">
<li class="in">内容</li>
<li class="in">样式</li>
<li class="in">行为</li>
</ul>
text-align
水平对齐text-align
本身就有一个属性值是两端对齐justify
。但是,要注意的是,使用它实现两端对齐,需要注意在元素之间添加空白符(包括空格、换行符、制表符)才起作用。由于HTML结构中,<li>
元素之间存在换行,所以不需要额外添加空白符
但仅仅是这样,元素也无法实现两端对齐效果
元素必须占满一行才行,如下所示。占满一行的元素可以实现两端对齐,没有占满的则无法实现
【text-align-last】
显然,上面的情况都不符合要求,这时就需要使用属性text-align-last
,该属性用来规定如何对齐文本的最后一行
于是把text-align
属性替换成text-align-last
。但是,要兼容IE浏览器需要同时设置text-align:justify
[注意]safari浏览器、IOS、androis4.4-浏览器不支持
<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: justify;text-align-last: justify;}
.in{background-color: lightblue;padding: 0 10px;display:inline-block;}
</style>
<ul class="list ">
<li class="in">内容</li>
<li class="in">样式</li>
<li class="in">行为</li>
</ul>
【after伪元素】
使用text-align-last
可以实现两端对齐的效果,但是兼容性并不好。通过给父元素设置伪元素:after
,并为伪元素设置inline-block
,并设置宽度100%,相当于伪元素:after
被挤到第二行。从而使原来的元素占满了第一行,触发了两端对齐的效果
这里要注意的是,因为空白会被解析为换行,所以可以通过设置父元素的高度height
,并溢出隐藏,来解决多余的换行问题
<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;height: 30px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: justify;}
.in{background-color: lightblue;padding: 0 10px;display:inline-block;}
.list:after{content:"";width:100%;display:inline-block;}
</style>
<ul class="list ">
<li class="in">内容</li>
<li class="in">样式</li>
<li class="in">行为</li>
</ul>
column
使用多列布局column
也可以实现类似的效果。column-count
定义了元素的列数,例子中有3个子元素,所以定义为3列。特别要注意的是,这时需要把子元素设置为block元素才会生效
[注意]IE9-浏览器不支持
<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: center;}
.col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.in{background-color: lightblue;padding: 0 10px;display:block;}
</style>
<ul class="list col3">
<li class="in">内容</li>
<li class="in">样式</li>
<li class="in">行为</li>
</ul>
如果子元素之间需要使用竖线,且竖线高度与子元素高度相同时,使用column-rule
可方便的实现需求
<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: center;}
.col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.col-rule{-webkit-column-rule: 1px solid black;-moz-column-rule: 1px solid black;column-rule: 1px solid black;}
.in{background-color: lightblue;padding: 0 10px;display:block;}
</style>
<ul class="list col3 col-rule">
<li class="in">内容</li>
<li class="in">样式</li>
<li class="in">行为</li>
</ul>
grid
栅格布局使用justify-content
的两端对齐属性space-between
[注意]IE10-浏览器不支持
<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;display:grid;justify-content:space-between;grid-auto-flow:column;}
.in{background-color: lightblue;padding: 0 10px;}
</style>
<ul class="list">
<li class="in">内容</li>
<li class="in">样式</li>
<li class="in">行为</li>
</ul>
CSS两端对齐的更多相关文章
- 实现css两端对齐
如何实现css的两端对齐功能? 最近做项目遇到这种情况,如图所示: input左边框的用户,旧密码,新密码,确认密码无法对齐,样式很丑. 解决办法: 找到对应的类名,加上:text-align:jus ...
- css两端对齐——div+css布局实现2端对齐的4种方法总结
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...
- CSS:两端对齐原理(text-align:justify)
我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...
- css 两端对齐的多种实现方式
http://www.cnblogs.com/PeunZhang/p/3289493.html
- 【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- css实现两端对齐的3种方法
两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...
- CSS实现两端对齐效果
CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...
- HTML + CSS短标题(二,三,四文字长度)两端对齐的方式
今天切图碰到了一个看似好弄,却并不好弄的文本两端对齐问题.如图1-1
随机推荐
- POJ 3071-Football(可能性dp)
Football Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3145 Accepted: 1591 Descript ...
- Fizzler
Fizzler 抓取网站数据不再是难事了,Fizzler(So Easy)全能搞定 首先从标题说起,为啥说抓取网站数据不再难(其实抓取网站数据有一定难度),SO EASY!!!使用Fizzler全搞定 ...
- wpa_cli P2P 连接相关的调试命令
在最近的一次客户端上的调试p2p的wifi display, 他们中的一半Android该调整了,整个前所以没有太多的研究p2p过程连接, 客户现在使用的非Android平台架构. 需要协助客户这么多 ...
- mass种子模块之domready
总结:由于IE6/7/8不支持DOMContentLoaded事件,虽然它支持onreadystatechange事件,但是readyState=complete几乎和onload事件一样,需要等页面 ...
- openGL剪裁区
/** * 缓冲区工具类 */public class BufferUtil { /** * 将浮点数组转换成字节缓冲区 */ public static ByteBuffer arr2ByteB ...
- [转]SQL2005后的ROW_NUMBER()函数的应用
SQL Server 2005后之后,引入了row_number()函数,row_number()函数的分组排序功能使这种操作变得非常简单 分组取TOP数据是T-SQL中的常用查询, 如学生信息管理系 ...
- 构建日均千万PV Web站点1
如何构建日均千万PV Web站点 (一) 其实大多数互联网网站起初的网站架构都是(Linux+Apache+MySQL+PHP). 不过随着时代的发展,科技的进步.互联网进入寻常百姓家的生活.所谓的用 ...
- C++中内存泄露的检测
C++没有java的内存垃圾回收机制,在程序短的时候可能比较容易发现问题,在程序长的时候是否有什么检测的方法呢? 假设有一个函数可以某点检测程序的内存使用情况,那是否可以在程序开始的时候设置一个点,在 ...
- D10
=-=今天被dev-c++坑到死..简直 晚上准备怒装liunx.. T1:数论 一开始碰到的是T1的运算符优先问题吧..maybe..但是我加上括号了还是WA啊..后面把式子拆开写才A了..次奥 附 ...
- 2012 T-SQL 新特性 and O2O项目
SQL Server 2012 T-SQL 新特性 NoSQL之HBase 9月初淘宝飞芃做了一个关于HBase的分享,讲的激情飞扬,让听众收益匪浅,现做下简单总结. HBase是一个NoSQL数 ...