Thuộc tính CSS inline-inline-end
Ví dụ
Đặt khoảng cách đến phần tử cha từ điểm cuối của phần tử <div> được định vị theo hướng nội tuyến:
div {
inset-inline-end: 50px;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính inset-inline-end
đặt khoảng cách giữa phần cuối của phần tử và phần tử cha theo hướng nội tuyến.
Lưu ý: Để thuộc tính này có hiệu lực, nó phải có thuộc tính position
được chỉ định.
Các thuộc tính CSS inset-inline
và inset-block
rất giống với các thuộc tính CSS top
, bottom
, left
và right
, nhưng các thuộc tính inset-block
và inset-inline
phụ thuộc vào hướng khối và dòng.
Lưu ý: writing-mode
và direction
của các thuộc tính CSS liên quan xác định hướng nội tuyến. Điều này ảnh hưởng đến vị trí kết thúc của một phần tử theo hướng nội tuyến và kết quả của thuộc tính inset-inline-end
. Đối với các trang bằng tiếng Anh, hướng nội tuyến là từ trái sang phải và hướng khối là hướng xuống dưới.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.insetInlineEnd="30%" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
inset-inline-end | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 |
Cú pháp CSS
inset-inline-end: auto| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default. The element's default inset distance. | Demo ❯ |
length | Specifies distance in px, pt, cm, etc. Negative values are allowed. Read about length units | Demo ❯ |
% | Specifies distance in percent relative to size of parent element on the corresponding axis. | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Với giá trị thuộc writing-mode
của phần tử <div> được đặt thành rl dọc, hướng nội tuyến hướng xuống dưới. Kết quả là phần cuối của phần tử được di chuyển từ bên phải xuống dưới:
div {
inset-inline-end: 50px;
writing-mode: vertical-rl;
}
Hãy tự mình thử »Ví dụ
Với giá trị thuộc tính direction
của phần tử <div> được đặt thành rtl, hướng trong dòng là từ phải sang trái. Kết quả là phần cuối của phần tử được di chuyển từ bên phải sang bên trái:
div {
inset-inline-end: 50px;
direction: rtl;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Vị trí CSS
Thuộc tính vị trí CSS: Thuộc tính Vị trí CSS
Thuộc tính hướng CSS: Thuộc tính CSS Direction
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS