在網頁設計中,有時需要將兩個子元素右對齊,這可以通過CSS樣式來實現。下面是幾種實現方式:
/*第一種方式*/ .parent{ display: flex; justify-content: space-between; } /*第二種方式*/ .parent{ position: relative; } .child1{ position: absolute; top: 0; left: 0; } .child2{ position: absolute; top: 0; right: 0; } /*第三種方式*/ .parent{ text-align: right; } .child1, .child2{ display: inline-block; }
第一種方式使用了CSS3中的flex布局,將父元素設置為flex容器,通過justify-content屬性將兩個子元素分別對齊到最左和最右。
第二種方式使用了position屬性,將父元素設置為相對定位,子元素分別設置為絕對定位,并通過top和left/right屬性將它們分別定位到左上和右上角。
第三種方式是將父元素設置為文本右對齊,子元素設置為行內塊級元素,從而實現在同一行內右對齊。
上一篇css讓一條線發光