HTML/JS转换工具
Unicode编码转换
当前位置:首页 > 网站技术 > DivCss教程 > 

css 两端对齐

来源:IT技术网编辑:雨天发布于:2017-06-20人围观

关于css 两端对齐的问题解答

css 两端对齐

CSS:

css 两端对齐
*{margin:0;padding:0;}
/*   说明:
 1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合,text-align-last 要生效,必须先定义text-align 为justify  2.line-height:0 解决标准浏览器容器底部多余的空白 */ .demo{      text-align:justify;      text-align-last:justify;      line-height:0;      height:44px;
}
/*  说明:  模块使用[换行符]或[空格符]后,webkit浏览器中会引起最后一个模块有多余空白,使用font-size:0可清除该空格 */ @media all and (-webkit-min-device-pixel-ratio:0){ .demo{      font-size:0;
} }  /*   说明:  1.text-align-last:justify 目前只有IE支持,标准浏览器需要使用 .demo:after 伪类模拟类似效果   2.opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白  */ .demo:after{      display:inline-block;      overflow:hidden;      width:100%;      height:0;      content:'';      vertical-align:top;
} .demo a{      width:20%;      display:inline-block;      height:44px;      line-height:44px;      text-align:center;      border:1px solid #428cc8;      color:#666;      font-size:16px;      margin-bottom:5px;      border-radius:3px;      background-color:#fefefe;      background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));      color:#666;      text-decoration:none;
}
css 两端对齐

织梦二维码生成器

与相关的文章
有时间的话来看看IT界的突发事件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片