在移動(dòng)端開(kāi)發(fā)中，我們常常會(huì)遇到需要將標(biāo)簽靠右的情況，比如說(shuō)在頭部導(dǎo)航欄中，我們希望將個(gè)別標(biāo)簽右對(duì)齊，這時(shí)就需要使用 CSS 實(shí)現(xiàn)。

一般來(lái)說(shuō)，現(xiàn)在大部分的移動(dòng)設(shè)備都支持 CSS3，也就意味著我們可以使用 CSS3 中新增的float屬性來(lái)實(shí)現(xiàn)標(biāo)簽右對(duì)齊的效果。

.right {
float: right;
}

以上代碼可以將添加該類(lèi)名的標(biāo)簽靠右排列，但需要注意的是，它的生效前提是該標(biāo)簽所在區(qū)域的寬度足夠容納該標(biāo)簽，否則它會(huì)自動(dòng)換行。

還有一種情況，就是在特殊的需求下，我們需要將標(biāo)簽緊貼在父元素的右側(cè)而不是浮動(dòng)，這時(shí)我們可以使用text-align屬性。

.parent{
text-align: right;
}
.parent .child{
display: inline-block;
}

以上代碼中，我們給父元素添加text-align: right;，將它內(nèi)部的所有子元素都右對(duì)齊。但這時(shí)候我們會(huì)發(fā)現(xiàn)，子元素會(huì)占據(jù)整行，無(wú)法實(shí)現(xiàn)緊貼父元素右側(cè)的效果。因此，我們給子元素添加了display: inline-block;，讓它以行內(nèi)塊元素的樣式展現(xiàn)，即可緊貼在父元素的右側(cè)。

補(bǔ)充一下：

如果你在使用浮動(dòng)來(lái)實(shí)現(xiàn)標(biāo)簽靠右時(shí)，發(fā)現(xiàn)它產(chǎn)生了一些意外的過(guò)渡效果（比如說(shuō)標(biāo)簽從浮動(dòng)位置慢慢滑出去），這是由于添加了過(guò)渡效果的緣故。可以使用以下代碼解決：

.right {
float: right !important;
}

最后就是一些小技巧啦。需要注意的是，在移動(dòng)端開(kāi)發(fā)中一般使用視口寬度（viewport）自適應(yīng)布局，我們可以利用media query來(lái)達(dá)到不同屏幕大小使用不同樣式的效果。

@media screen and (max-width: 480px){
.right{
text-align: right;
}
}

以上代碼表示在最大寬度為 480px 的情況下，將標(biāo)簽靠右，達(dá)到自適應(yīng)的效果。