CSS中設(shè)置邊框靠右其實(shí)比較簡(jiǎn)單,可以通過(guò)以下兩種方式來(lái)實(shí)現(xiàn)。
第一種方式是通過(guò)設(shè)置盒模型的屬性,使用float屬性將元素向右浮動(dòng),再設(shè)置margin值即可。例如:
p { float: right; margin: 10px; border: 1px solid black; }上述代碼段中,我們?cè)O(shè)置了paragraph元素(p標(biāo)簽)向右浮動(dòng),并使其距離周圍元素保持10像素的寬度,然后使用border屬性添加1像素黑色邊框。 第二種方式是使用CSS3的flex屬性,我們可以設(shè)置一個(gè)父元素,將它的display屬性設(shè)置為flex,并將justify-content屬性設(shè)置為flex-end。如下:
.container { display: flex; justify-content: flex-end; align-items: center; height: 100px; } .container p { border: 1px solid black; margin: 10px; }上述代碼中,我們?cè)O(shè)置了一個(gè)類名為container的父元素,將其顯示屬性設(shè)置為flex,再將它的水平對(duì)齊方式設(shè)置為flex-end,并且將自適應(yīng)元素的高度設(shè)置為100像素。然后我們?cè)O(shè)置paragraph元素(p標(biāo)簽)的邊框和margin屬性,這樣它們就自動(dòng)靠在了右側(cè)。 以上兩種方式都能夠?qū)崿F(xiàn)將元素對(duì)齊到右側(cè),具體選擇哪種方式取決于實(shí)際的需求情況及個(gè)人喜好。