在 CSS 中,我們可以使用 text-align 屬性來控制文本的對齊方式。這個屬性可以取值為 left、center、right 或 justify。
當我們想要將文本右對齊時,通常會嘗試使用 text-align: right。但是,當我們將這個屬性應用到一個塊級元素(如 div)時,卻發現對齊失效了。
div {
text-align: right;
}
這是因為塊級元素的寬度默認是它所在父級元素的寬度,如果我們想要一個元素能夠右對齊,需要給這個元素設置一個固定寬度。
div {
width: 300px;
text-align: right;
}
但是,如果我們想要將一個行內元素(如 span)右對齊,這個方法卻可以使用。因為行內元素默認寬度是它所包含內容的寬度,所以 right 值可以正常工作。
span {
text-align: right;
}
如果我們想要將一個塊級元素內部的文本右對齊,也可以使用這個方法。將這些文本放在一個行內元素內,然后將這個行內元素右對齊即可。
div p span {
display: inline-block;
text-align: right;
}
綜上所述,塊級元素默認寬度是父級元素的寬度,因此無法使用 text-align: right 實現右對齊,而行內元素寬度是包含內容的寬度,可以使用這個屬性進行右對齊。如果我們想要將一個塊級元素內部的文本右對齊,可以使用一個內部的行內元素進行調整。
上一篇css選擇器的樣式優先級
下一篇個人簡歷代碼案例css