CSS如何实现文字两端对齐

最近在工作项目中接触到Web界面设计的问题，要实现文字两端对齐的效果。在网上搜索了一下，差不多都是互相转帖，用的都是类似的技巧：

text-align:justify;text-justify:inter-ideograph;

但问题是，我怎么就看不到效果呢？无论是英文还是中文，在IE和chrome下都不起作用。后来，终于在StackOverflow上找到解决方法了。

!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title/titlestyletype="text/css".arterli{font-size:14px;line-height:24px;color:#4a4a4a;}.arterspan{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;}.arteri{display:inline-block;width:%;height:0;}.arter1li{font-size:14px;line-height:24px;color:#4a4a4a;}.arter1span{height:24px;line-height:24px;width:65px;text-align:justify;display:inline-block;overflow:hidden;vertical-align:top;}.arter1span:after{content:"";display:inline-block;width:%;height:0px;}/style/headbodyulclass="arter"lispan作品名称i/i/span：宝贝儿/lilispan作品类型i/i/span：油画/lilispan艺术家i/i/span：张玉瀛/lilispan风格i/i/span：超现实/lilispan材质i/i/span：布面油画/lilispan题材i/i/span：人物/lilispan创作时间i/i/span：/lilispan所在位置i/i/span：华东/lilispan尺寸i/i/span：78x78cm/li/ulbr/br/ulclass="arter1"lispan作品名称/span：宝贝儿/lilispan作品类型/span：油画/lilispan艺术家/span：张玉瀛/lilispan风格/span：超现实/lilispan材质/span：布面油画/lilispan题材/span：人物/lilispan创作时间/span：/lilispan所在位置/span：华东/lilispan尺寸/span：78x78cm/li/ul/body/html

样式：

从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。

但是加入HTML元素又违反了结构表现分离的原则，我们可以改用after、before伪元素：

li:after{content:"";display:inline-block;width:%;}

转载请注明：http://blog.hzbdfjk.com/jbzs/7697.html