需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:
div{
border: 1px solid blue
width: 300px
text-align: justify
}
div:after {
display: inline-block
width: 100%
content: ''
}
3、浏览器运行index.html页面,此时一行内的文字实现了两端对齐。
可以用“text-align:right”让文字靠右对齐。
1、新建html文档,在body标签中添加div标签,为div设置一个id,这里以“demo”为例:
2、在div标签中添加文字,然后为div标签设置宽高和边框,这时默认情况下文字靠右对齐:
3、为div添加“text-align:right”,其中“text-align”指的是文本对齐方式,“right”指的是靠右对齐,这时网页中文字将会靠右对齐:
但问题是,我怎么就看不到效果呢?无论是英文还是中文,在IE和chrome下都不起作用。后来,终于在StackOverflow上找到解决方法了。
从效果图可以看到,除了要在块级元素加text-align:justify样式外,还需要在里面加一个空的span元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。
但是加入HTML元素又违反了结构表现分离的原则,我们可以改用after、before伪元素:
参考资料: css实现文字两端对齐