HTML 如下：

<div class="parent">
  <div class="block"></div>
</div>

想要塊級元素居右往往設置 margin-right: 0 屬性是行不通的

下面介紹五種方法，不同場景適用不同方法

使用 margin 屬性

.block{
    margin-left: auto;
}

將 margin-left 設為 auto 后, 元素左邊的 margin 會被盡可能的撐大, 所以自然就把元素擠到右邊去了

使用 position 屬性

.parent{
  position: relative;
}
.block{
  position: absolute;
  right: 0;
}

使用 position 定位, 絕對能把元素放到右邊去.

使用 float 屬性

.block{
  float: right;
}

使用 float 浮動將元素浮動到右邊.

使用 text-align 屬性

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

將塊設為行內元素,然后父元素使用 text-align: right; 是塊到右邊.

使用 flex 屬性

.parent{
  display: flex;
  justify-content: flex-end;
}

將父元素變?yōu)閺椥匀萜? 然后將 justify-content 設為 flex-end, 那么容器中的彈性元素會從右開始排列.

到此這篇關于CSS 實現(xiàn)塊級元素靠右的方法的文章就介紹到這了,更多相關css塊級元素內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論