美文网首页
text-align:justify列表的两端对齐布局

text-align:justify列表的两端对齐布局

作者: lmmy123 | 来源:发表于2017-12-06 14:55 被阅读17次

如何实现元素的两端对齐?

text-align: justify


*****inline元素(比如a,span等),只有margin-left/margin-right有效,margin-top/margin-bottom无效

padding值都有效,但是不占据空间


margin负值来增大父标签的宽度,具体实现如bootrstrap中的栅格布局

兼容IE6/IE7浏览器需要满足 inline标签化以及结束标签连续化,列表元素间换行或留空

现代浏览器: 列表元素间换行或留空

IE8: 列表元素间换行或留空,列表元素的环境字体大小不能为0


解决列表元素最后一行无法两端对齐?

列表(或文字)要两端对齐的前提就是内容必须超过一行,所以解决最后一行元素无法两端对齐:就是在列表的最后添加一个高度为0宽度100%的透明的inline-block的标签即可

.justify_fix{display:inline-block; width: 100%; height:0; overflow:hidden}

<span class="justify_fix"></span>

相关文章

网友评论

      本文标题:text-align:justify列表的两端对齐布局

      本文链接:https://www.haomeiwen.com/subject/munkixtx.html