inset-inline-endegy CSS tulajdonság, amely beállítja az elem eltolódásának hosszát a kezdő inline irányban. Ez olyan, mint a deklarálás right, mivel a pozicionált elemekre vonatkozik, és eltol egy elemet a bal irányban, azzal a különbséggel, hogy a kezdő és a végpont az adott elem alapján módosulhat direction, text-orientationés writing-modecsakúgy, mint más logikai tulajdonságok.
A tulajdonság a CSS Logikai tulajdonságok és értékek 1. szintű specifikációjának része, amely jelenleg a Szerkesztő Piszkozat állapotában van. Ez azt jelenti, hogy a definíció és az ezzel kapcsolatos információk változhatnak a hivatalos ajánlás között.
.element ( inset-inline-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )Így például, ha az írás mód beállítása horizontal-lraz inset-inline-endingatlan jár, mint a beállítás left, ellensúlyozva egy elemet a bal szélét. Még egy explicitet is meg kell adnia positionugyanazon az elemen, hogy életbe lépjen, csakúgy, mint a fizikai eltolás tulajdonságai.
De változtassa meg az elemet writing-modevalami hasonlóra, vertical-lrés a „kezdő” él függőleges irányban forog, inkább tophelyette viselkedik .
Szintaxis
inset-inline-end: ;- Kezdő érték:
auto - A következőkre vonatkozik: elhelyezett elemek
- Örökölt: nem
- Százalékok: ami a megfelelő fizikai tulajdonságot illeti
- Számított érték: megegyezik a megfelelő
lefttulajdonsággal - Animáció típusa: kiszámított értéktípus szerint
Értékek
inset-blockhosszértéket vesz fel, és támogatja a globális kulcsszavakat. Alapértelmezett értéke auto.
/* Length values */ inset-inline-end: 50px; inset-inline-end: 4em; inset-inline-end: 3.5rem inset-inline-end: 25vh; /* Percentage values */ inset-inline-end: 50%; /* Keyword values */ inset-inline-end: auto; /* initial value */ /* Global values */ inset-inline-end: initial inset-inline-end: inherit; inset-inline-end: unset;Böngésző támogatás
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| Nem | Nem | 63+ | Nem | Nem | Nem |
| Android Chrome | Android Firefox | Android böngésző | iOS Safari | Opera Mini |
|---|---|---|---|---|
| Nem | 79+ | Nem | Nem | Nem |
Demó
További irodalom
- CSS logikai tulajdonságok és értékek 1. szintű specifikáció (a szerkesztő tervezete)
- MDN dokumentáció
- A logikai tulajdonságok és értékek megértése (Smashing Magazine)
- CSS logikai tulajdonságok (Adrian Roselli)
- Kétirányú horizontális szabályok a CSS-ben (Husszein Al Hammad)