left:
把文本排列到左边。默认值:由浏览器决定。
right“把文本排列到右边。
center:把文本排列到中间。
justify:实现两端对齐文本效果。
inherit:规定应该从父元素继承 text-align 属性的值。
需要准备的材料分别有:电脑、浏览器、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页面,此时一行内的文字实现了两端对齐。
方法有很多种,是我就采用以下几种方式之一:
方式一:table布局
这种左右分别对齐的排版,第一反应用table。我知道肯定有人开始鄙视我,说什么年代了还在用table。但是,我想说的是table也是标准标签之一,把标签用在合适的地方,就是对标签最优的利用,不是吗?
*{margin: 0
padding: 0
}
.personName{
text-transform: uppercase
} <table>
<tr>
<td valign="top">
<span class="personName">Georage:</span>
</td>
<td valign="top">
<p>This is a good day.</p>
<p>This is a good day.</p>
</td>
</tr>
<tr>
<td valign="top">
<span class="personName">Ken:</span>
</td>
<td valign="top">
<p>This is a good day.</p>
<p>This is a good day.</p>
</td>
</tr>
</table>
方式二:利用dl标签
*{margin: 0
padding: 0
}
.personName{
text-transform: uppercase
float: left
width: 80px
clear: left /* 清除左浮动 */
}
.words{
float: left
}
.dailog{
overflow: hidden /* 可以清除浮动 */
margin-bottom: 20px
line-height: 24px
font-size: 14px
}
<dl class="dailog">
<dt class="personName">
Georage:
</dt>
<dd class="words">
<p>This is a good day.</p>
<p>This is a good day.</p>
</dd>
<dt class="personName">
Ken:
</dt>
<dd class="words">
<p>This is a good day.</p>
<p>This is a good day.</p>
</dd>
</dl>
方式三:可以利用 ul 或者 ol 标签,方法类似 方式二。
方式四:可以全用div,具体也类似方式二,这里就不罗列了。
一些详细的样式就不写了,这里只写了主要的样式,仅供参考。