csstext-align-last设置末尾⽂本对齐⽅式text-align-last：auto | start | end | left | right | center | justify
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>让我们⼀起共勉，互相⽀持，让我们跑得更快，跑得更好吧！哪怕路上有风⾬，哪怕途中有坎坷，只要不放弃奔跑，不放弃对⾃我的修⾏，我们终究会创造属于⾃
要说text-align和text-align-last的区别可能就是text-align-last只包含最后⼀⾏。
有时候我们还真的想让最后⼀⾏⽂本居中。
这种情况我想也是会有的吧，代码如下：
<style>
body,div{
margin:0;
padding:0;
text align center}
div{
width:300px;
text-align:justify;
text-align-last:center;
}
</style>
<div>让我们⼀起共勉，互相⽀持，让我们跑得更快，跑得更好吧
！哪怕路上有风⾬，哪怕途中有坎坷，只要不放弃奔跑，不放弃对
⾃我的修⾏，我们终究会创造属于⾃⼰的⽣命奇迹！</div>
注意：如果text-align和last-align-last同时设置，那么会忽然text-align对最后⼀⾏的设置。
转载于:wwwblogs/pssp/p/5905747.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。