CSS inset-inline-end ominaisuus
- Edellinen sivu inset-inline
- Seuraava sivu inset-inline-start
Määrittely ja käyttö
inset-inline-end
Ominaisuus asettaa elementin päätyyn rivitys suunnassa olevan etäisyyden isäelementtiin.
Huomioitavaa:Jotta tämä ominaisuus vaikuttaisi, on määritettävä position
Ominaisuudet.
CSS:n inset-inline
ja inset-block
Ominaisuudet vastaavat CSS:n top
,bottom
,left
ja right
Ominaisuus on hyvin samanlainen, mutta inset-block
ja inset-inline
Ominaisuus riippuu lohkosuunnasta ja rivitys suunnasta.
Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode
ja direction
Määrittelee rivitys suunnan. Tämä vaikuttaa elementin päätyyn rivitys suunnassa ja inset-inline-end
Ominaisuuden vaikutus. Englanninkielisillä sivuilla rivitys suunta on vasemmalta oikealle, ja lohko suunta on alas.
Esimerkki
Esimerkki 1
Aseta sijoitettu <div>-elementin päätyyn isäelementtiin rivitys suunnassa oleva etäisyys:
div { inset-inline-end: 50px; }
Esimerkki 2
Kun <div>-elementin writing-mode
Kun ominaisuuden arvo asetetaan vertical-rl:ksi, rivitys suunta on alhaalta ylös. Tämä tarkoittaa, että elementin pääty siirtyy oikealta alaspäin:
div { inset-inline-end: 50px; writing-mode: vertical-rl; }
Esimerkki 3
Kun <div>-elementin direction
Kun ominaisuuden arvo asetetaan rtl:ksi, rivitys suunta on oikealta vasemmalle. Tämä tarkoittaa, että elementin pääty siirtyy oikealta vasemmalle:
div { inset-inline-end: 50px; direction: rtl; }
CSS syntaksi
inset-inline-end: auto|length|initial|inherit;
Ominaisuusarvo
Arvo | Kuvaus |
---|---|
auto | Oletusarvo. Elementin oletusarvoinen sisäänrakennettu etäisyys. |
length | Määritä etäisyys px, pt, cm jne. yksiköinä. Sallitaan negatiiviset arvot. Katso:CSS yksiköt. |
% | Määritä suhteellinen etäisyys suhteessa isäelementtiin vastaavassa akselissa olevaan kohtaan prosentteina. |
initial | Aseta tämä ominaisuus sen oletusarvon arvoksi. Katso: initial. |
inherit | Perii tämän ominaisuuden isältään. Katso: inherit. |
Tekninen yksityiskohta
Oletusarvo: | auto |
---|---|
Perinnäisyys: | Ei |
Animaation tekeminen: | Tuki. Katso:Animaatiotunnukset. |
Versio: | CSS3 |
JavaScript syntaksi: | object.style.insetInlineEnd="30%" |
Selaimen tuki
Taulukon numerot merkitsevät ensimmäistä selainta, joka tukee kyseistä ominaisuutta täysin.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
87.0 | 87.0 | 63.0 | 14.1 | 73.0 |
Liittyvät sivut
Oppitunti:CSS-sijoittelu
Viittaus:CSS position ominaisuus
Viittaus:CSS direction ominaisuus
Viittaus:CSS writing-mode ominaisuus
- Edellinen sivu inset-inline
- Seuraava sivu inset-inline-start