您的位置：首页 > Web前端 > CSS

css text-align-last设置末尾文本对齐方式

2016-09-25 13:32 585 查看

auto：

无特殊对齐方式。

left：

内容左对齐。

center：

内容居中对齐。

right：

内容右对齐。

justify：

内容两端对齐。

start：

内容对齐开始边界。

end：

内容对齐结束边界。

说明：用来设置一个块中的最后一行的对齐方式。只能运用于块元素上，或者说块元素的断行内。

这里着重讲解一下"justify"，一般我们在写表单啥的情况下都会用到它。

默认情况下是这样的

用了"justify"以后

<style>
body,ul,li,label,input{
margin:0;
padding:0;
}
ul{
list-style:none;
}
label{
width:100px;
display:inline-block;
text-align-last:justify;
}
</style>
<ul>
<li>
<label for="#user">网名:</label>
<input type="text">
</li>
<li>
<label for="#user">个性签名:</label>
<input type="underwrite">
</li>
</ul>

如果想让文字对齐可以把:去掉。

其实我们还可以这个样子。

<style>
body,ul,li,label,input{
margin:0;
padding:0;
}
ul{
list-style:none;
}
li{
overflow:hidden;
}
label{
width:100px;
white-space:pre;
}
label,input{
float:left;
}
</style>
<ul>
<li>
<label for="#user">网    名:</label>
<input type="text">
</li>
<li>
<label for="#user">个性签名:</label>
<input type="underwrite">
</li>
</ul>

原理就是用

white-space

保留空格。缺点就是你的自己调整空格哈，不过比起用

好多了。

"justify"还有一种地方也会用到，就像这个。

看起来右边特别丑，我们可以用

text-align:justify

<style>
body,div{
margin:0;
padding:0;
}
div{
width:300px;
text-align:justify;
text-indent:2em;
}
</style>
<div>让我们一起共勉，互相支持，让我们跑得更快，跑得更好吧！哪怕路上有风雨，哪怕途中有坎坷，只要不放弃奔跑，不放弃对自我的修行，我们终究会创造属于自己的生命奇迹！</div>

要说

text-align

和

text-align-last

的区别可能就是

text-align-last

只包含最后一行。

有时候我们还真的想让最后一行文本居中。

这种情况我想也是会有的吧,代码如下：

<style>
body,div{
margin:0;
padding:0;
}
div{
width:300px;
text-align:justify;
text-align-last:center;
}
</style>
<div>让我们一起共勉，互相支持，让我们跑得更快，跑得更好吧
！哪怕路上有风雨，哪怕途中有坎坷，只要不放弃奔跑，不放弃对
自我的修行，我们终究会创造属于自己的生命奇迹！</div>

注意：如果

text-align

和

last-align-last

同时设置，那么会忽然

text-align

对最后一行的设置。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航