css实现两端对齐

来源：互联网发布：ios数据存储编辑：程序博客网时间：2024/05/18 00:36

两端对齐用text-align:justify;但怎么解决单行不能两端对齐呢，思路就是：

　　让浏览器认为这不是最后一行就行了

在元素里面加一个会换行的空的子元素比如:

<i style="display:inline-block;width:100%;height:0;"></i> <ul class="arter">                    <li><span>作品名称<i></i></span>：  宝贝儿</li>                    <li><span>作品类型<i></i></span>：  油画</li>                    <li><span>艺术家<i></i></span>：  张玉瀛</li>                    <li><span>风格<i></i></span>：  超现实</li>                    <li><span>材质<i></i></span>：  布面油画</li>                    <li><span>题材<i></i></span>：  人物</li>                    <li><span>创作时间<i></i></span>：  2011</li>                    <li><span>所在位置<i></i></span>：  华东</li>                    <li><span>尺寸<i></i></span>：  78x78cm</li>                </ul>
li{font-size:14px;line-height:24px;color:#4a4a4a;                    span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;                         i{display:inline-block;width:100%;height:0;}                    }                }
效果如下：

几点注意事项：
1）span要设置为inline-block;才能和后面的字同行显示，同时设置width才会使<i>换行；
2）必须要设置span元素的height，和overflow:hidden否则<i>还是会占高度；
3）vertical-align:top;可以使，li内的span和后面的字，高度对齐，否则会变成




HTML：
<div class="justify">hello, text justify.</div><br/><div class="justify"> hello, text justify.<span></span></div><br/><div class="justify">中 文 两 端 对 齐</div><br/><div class="justify">中 文 两 端 对 齐<span></span></div>

样式：
div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px;}div.justify > span { display: inline-block /* Opera */; padding-left: 100%; }

阅读全文

0 0